如何显示搜索建议

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> 

搜索.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