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

如何显示搜索建议

1 个答案: