javascript - 如何显示搜索建议

我正在尝试向搜索框添加建议。用户输入内容后，应该显示建议，如果用户将鼠标悬停在任何建议上，则应突出显示该建议，单击建议时，应将其与分号一起添加到搜索词中以分隔搜索词。

我能够显示建议，但问题是实施以下

预期结果如下

Search box >>> f
suggestions first
            four
when first is clicked it will be highlighted then
Search box >>> first;

when t is clicked
Search box >>> first;t
suggestions two
            three
click on three will cause to remove the t from search box and add the three
Search box >>> first;three

when tw is entered
Search box >>> first;three;tw
suggestions two
            twelve
when two is selected
Search box (first;three;two

proposal.jsp

<c:forEach items="${sug}" var="mysug">
    <label id="suggestion" onclick="selectSug(<c:out value="${mysug}"/>)"><c:out
    value="${mysug}"/></label>
    <br/>
</c:forEach>

search.jsp

 <script type="text/javascript">
  function selectSug(value){
         alert("vlue"+value);
         var temp = document.getElementById("mysearch").textContent ;
         document.getElementById("mysearch").textContent = temp + value + " ; ";
  }

  function findsug(value){
              if(window.XMLHttpRequest)
            {
                xmlhttp = new XMLHttpRequest();
            }
            else
            {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
                {
                    document.getElementById("sugs").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("get","search?input="+value,false);
            xmlhttp.send();
        }
   ...
<s:textfield id="mysearch" name="mysearch" label="Search"
                         onkeyup="findsug(this.value)"/>

<div id="sugs">
  </div>

mystyle.css

#suggestion:hover{
    background:red;
}

让我知道是否应包括代码的任何其他部分。
  我也想知道是否可以使用jQuery以更简单的方式做到这一点

最佳答案

试试jquery-ui给定的小部件

auto complete