自动建议搜索栏的下拉菜单问题答案

【问题标题】：Issue with Drop down menu for auto suggest search bar自动建议搜索栏的下拉菜单问题
【发布时间】：2014-05-11 18:19:35
【问题描述】：

我正在尝试使用自动建议创建一个搜索栏。搜索栏是一个文本输入框。每次在文本框中输入内容时，我都会对 php 页面进行 Ajax 调用，该页面将返回一个无序列表（php 页面将回显 html 以获取具有类名结果的无序列表，并将 li 作为搜索结果）。我在将无序列表放入的文本框下方有一个 div（其中 id="demo"）。最初 div demo 有 display: none;但是文本框被聚焦它变成了 display:block;当文本框被聚焦时，它变为 display:none;。我这样做是因为我希望当文本框没有聚焦时下拉菜单消失。但是我这里有问题，如果我点击无序列表中的一个 li，那么文本框的值必须等于 li 中的内容。我尝试了各种方法来做到这一点。我为 ul.result 下的所有 li 元素赋予了 onlineclick 属性。 onlclick 属性调用一个函数，使文本框的值等于 li 的文本内容。但它不起作用，div 正在消失，但函数没有被调用。这是 index.php 页面。

 <head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="autosuggest.js"></script>
 </head>
 <body>
 <input name="search" class="search" type="text"                                  onkeyup="autosuggest(this.value,event.which)"  autocomplete="off" />
 <div id="demo" style="display: none;"></div>
 </body>

这是js文件中的代码。我在这里给出了 onclick 函数作为 alert(); 只是为了测试功能，但它不起作用。谁能帮帮我。

$(document).ready(function(){

$(".search").focusin(function(){
    $("#demo").css("display","block");
});
$(".search").focusout(function(){

    $("#demo").css("display","none");
});
$("#demo").mouseenter(function(){
    $(".selected").removeClass("selected");
});
});

谢谢

【问题讨论】：

标签： jquery drop-down-menu searchbar

【解决方案1】：

$("ul").delegate("li", "click", function(e){
     //e.currentTarget(); This will give the current selected object 
     //put an alert this will give you the selected list item 
});

每当您使用列表项时，您都可以清楚地识别已选择的列表项，为此您需要使用委托功能。

【讨论】：