如何显示搜索建议答案

【问题标题】：How to show suggestions for search如何显示搜索建议
【发布时间】：2013-05-13 05:03:22
【问题描述】：

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

我能够展示建议，但问题在于执行以下操作

预期结果如下

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 以更简单的方式做到这一点

【问题讨论】：

试试这个harvesthq.github.io/chosen
我不知道您是如何实现它的，因为您使用 ajax 来获取搜索结果，并且在示例中您使用的是 JSTL。无论如何，您可以使用 CHOSEN 库并且非常易于使用.
@Meherzad，这部分代码在suggest.jsp页面中，ajax用于加载并将其嵌入到search.jsp页面中。
你是如何嵌入它的？
酷.. 尝试选择，我已将它用于您面临的类似问题。如果您对使用它有任何疑问，请发布。

标签： javascript jquery css ajax jsp

【解决方案1】：

尝试 jquery-ui 给定的小部件

auto complete

【讨论】：