jQuery自动完成预过滤结果 – 显示全部
我有一个搜索用户数据库的ajax函数。 所有用户名都被放入一个数组中
var usernames = ["Mike Scott", "Mike Whosname", "Mike Johns", "Mike Nicolas"];
简单地说,我希望自动完成只显示此数组中的任何内容。 要么完全关闭或完全关闭搜索,所以它不会再次过滤我的结果。
原因是,我的SQL代码也搜索用户ID,所以如果我键入例如“mscott”,我的servlet将返回“Mike Scott”,它将被放入usernames
数组中。
如果他们输入“mscott”,我希望他们能够选择“Mike Scott”。
自动完成function正在尝试搜索我的数组中的“mscott”,它没有显示任何结果,所以我希望它只是简单地显示我的数组中的所有内容。
这可能吗?
谢谢。
当前代码:
$('#userInput').autocomplete({source: usernames, search: "", minLength: 0}).keyup(function(){ var url = "/AJAX/SearchUsers.do?searchQ=mscott"; $.ajax(url, { type: "GET", datatype: "json", success: function(data) { for (var i =0; i < data.length; i++) { usernames.push(data[i].username); } } }); $(this).autocomplete("option", {source: usernames, search: "", minLength: 0}); });
来自jQuery UI API:
搜索([值])
如果未取消事件,则触发搜索事件并调用数据源。 可以由类似选择框的按钮用于在单击时打开建议。 在没有参数的情况下调用时,将使用当前输入的值。 可以使用空字符串和minLength:0来调用以显示所有项目。
这可以像这样执行:
$('#userInput').focus(function(){ $(this).autocomplete( "search", "" ); });
要回答你的问题,是的,有办法。 查看更多: http : //api.jqueryui.com/autocomplete/#method-search
示例代码: https : //jsfiddle.net/4muo4pf0/
我解决了我的问题,这是一个我忽略的小问题,但仍然值得回答我自己的问题,只是其他人之前没有考虑过这个问题。
我的问题是因为我的结果是预先过滤的,我正在重置密钥上的usernames
数组以显示一组全新的结果。
但是,以下代码: usernames = [];
当重新声明变量并且对原始数组(自动完成使用)的引用丢失时,这不是重置当前数组的好方法。 所以我的控制台显示我的用户名数组有新值,但自动完成没有显示任何新值。
感谢@Twisty提供帮助,即使我没有提供我正在使用的一些代码。 他的小提琴帮我清理了很多东西。
我最终使用以下方法清除数组:
usernames.length = 0;
新代码:
$('#userInput').autocomplete({ source: usernames, search: "", minLength: 0 }).keyup(function(){ var inputField = $(this); var site = $('#site').val(); var url = "/AJAX/SearchUsers.do?searchQ="+inputField.val()+"&site="+site; if (inputField.val().length > 3){ $.ajax(url, { type: "GET", datatype: "json", success: function(data) { taggedData = data; for (var i =0; i < data.length; i++) { usernames.push(data[i].username); } } }); } $(this).autocomplete("search", ""); usernames.length = 0; });