javascript - 如何显示搜索建议

Question

我正在尝试向我的搜索框添加建议。一旦用户输入内容，它应该显示建议，如果用户将鼠标悬停在任何建议上，它应该突出显示，当建议被点击时，它应该被添加到搜索词中，并用分号分隔搜索词。

我能够显示建议，但问题在于实现以下内容

预期结果如下

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

suggestion.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 以更简单的方式完成此操作

Answer 1

尝试 jquery-ui 给定的小部件

auto complete