1

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

我能够提出建议，但问题是实施以下

预期结果如下 

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

建议.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>

我的样式.css

#suggestion:hover{
    background:red;
}

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

4

1 回答 1

0

尝试 jquery-ui 给定的小部件

自动完成

于 2013-05-13T15:12:28.897 回答