Question

我正在尝试使用自动建议制作搜索栏。搜索栏是一个文本输入框。每次在文本框中输入内容时，我都会对php页面进行Ajax调用，该页面将返回一个无序列表（php页面将回显一个带有类名结果的无序列表的html，其中li为搜索结果）。我在文本框下面有一个div（id =“demo”），我将无序列表放入其中。最初div demo有display：none;但文本框是聚焦的，它变成显示：块;当文本框被聚焦时，它变为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");
});
});

谢谢

Answer 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 
});

每当您使用列表项时，您都清楚地标识了已选择的列表项，并且您需要使用委托功能。

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

1 个答案: