jQuery的自动完成不显示下拉
我有这个自动完成输入:jQuery的自动完成不显示下拉
<input type="text" id="find_user" class="autocomplete_field" />
脚本:
$("#find_user").autocomplete({
source: "/get_ajax_data.php?type=find_user",
minLength: 3,
timeout : 1000,
select: function(event, ui) {
window.location.href = "/user_admin.php?action=edit&id=" + ui.item.id
}
});
当 “test” 的用户类型,我得到了如下结果返回:
[{"id":"26","uname":"test 1","firstname":"Test","lastname":"1","email":"[email protected]", ............
选择下拉菜单显示正常
我添加了一个选项,以显示所有,把输入 “*”
$(".autocomplete_field").keyup(function(){
if ($(this).val() == '*') {
$(this).autocomplete('search', "___");
}
})
结果是:
[{"id":"1","uname":"admin","firstname":"Ad","lastname":"Min","email":"","lang_iso_code":null,.....................
,但没有选择下拉列表所示。
它在我的本地机器上工作,所以我认为它可能是超时问题。这就是为什么我添加了超时选项(不确定是否正确)。没有帮助。 我认为它可能是其他用户的数据('测试'用户(只有两个其他用户)...所以我通过填写他们的名字(admin和cron)单独搜索这两个用户和数据返回罚款与选择框显示。
只要我尝试查看所有在现场,它不显示选择下拉列表。 虽然只有5个用户(admin + cron +三个测试帐号) 约需440ms返回2.2kb的数据。
我使用JQ UI 1.11
编辑:
我只是做了一个测试用“___”作为搜索文本,所有的用户都在下拉菜单中显示。我假设的代码:
$(this).autocomplete('search', "___");
没有被设置同样的事情,当我搜索文本“___”
在conlsole我可以看到由Ajax调用,术语“___”,并结果如上。就好像它不想在我使用'*'时显示菜单列表,并且只在实时服务器上显示。本地工作正常。
经过一些更多的测试以及搜索和响应事件中的一些控制台输出后,我得出结论,我的代码必须导致自动填充字段与自身发生冲突。
验证码:
$(".autocomplete_field").keyup(function(){
if ($(this).val() == '*') {
$(this).autocomplete('search', "___");
console.log(".autocomplete_field search fired");
}
})
调用PHP页面,从而返回我在控制台中看到的数据。 但事件发射的跟踪过程中,我也看到,原来的搜索功能也被称为:
$("#find_user").autocomplete({
....
search: function(event, ui) {
console.log("#find_user search fired");
}
它上面的顺序触发。 因此第二次搜索没有达到最小长度标准,因此菜单没有显示或清除,以便我快速查看任何内容。
与本地测试结果回来快,我认为,第一搜索发射了,得到的结果,并且菜单显示出,第二次搜索才可以发射。
我的解决方法是这样的:
$(".autocomplete_field").keyup(function(){
if ($(this).val() == '*') {
//$(this).autocomplete('search', "___");
$(this).autocomplete("option", "minLength", 1);
} else {
$(this).autocomplete("option", "minLength", 3);
}
})
与该转换PHP脚本的变化 “*” - > “”,然后能装进SQL查询...名称LIKE“% %”。我可能可以做到这一点,使'_'作为列表的所有触发器不是必需的转换,但我喜欢“*”作为触发器。
我建议你看看这篇博客的jQuery UI自动完成的例子 - http://salman-w.blogspot.in/2013/12/jquery-ui-autocomplete-examples.html – Subhash 2014-11-25 06:57:24