jQuery自动完成预过滤结果 - 显示全部

时间:2016-04-14 14:08:40

标签: jquery jquery-ui autocomplete jquery-ui-autocomplete

我有一个搜索用户数据库的ajax函数。所有用户名都被放入类似

的数组中
var usernames = ["Mike Scott", "Mike Whosname", "Mike Johns", "Mike Nicolas"];

简单地说,我希望自动完成功能只显示此数组中的任何内容。要么完全关闭也要完全关闭搜索,这样它就不会再次过滤我的结果。

原因是,我的SQL代码也搜索用户ID,所以如果我键入例如" mscott",我的servlet将返回" Mike Scott"它被放入usernames数组。

我希望他们能够选择" Mike Scott"如果他们输入" mscott"。

自动完成功能正试图在我的数组中搜索" 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});

  });

2 个答案:

答案 0 :(得分:1)

来自jQuery UI API:

  

搜索([值])

     

触发搜索事件并在事件发生时调用数据源   没有取消。可以通过类似选择框的按钮来打开   点击时的建议。当没有参数调用时,当前   使用输入值。可以使用空字符串调用   minLength:0显示所有项目。

这可以这样执行:

$('#userInput').focus(function(){
  $(this).autocomplete( "search", "" );
});

要回答你的问题,是的,有办法。查看更多:http://api.jqueryui.com/autocomplete/#method-search

示例代码:https://jsfiddle.net/4muo4pf0/

答案 1 :(得分:1)

我解决了我的问题,这是一个我忽略的小问题,但仍然值得回答我自己的问题,只是其他人之前没有考虑过这个问题。

我的问题是因为我的结果是预先过滤的,我正在重置密钥上的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;
});