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

Question

我有一个 ajax 功能可以搜索用户数据库。所有用户名都被放入一个数组中，如

var usernames = ["Mike Scott", "Mike Whosname", "Mike Johns", "Mike Nicolas"];

很简单，我希望自动完成功能只显示此数组中的任何内容。或者完全关闭搜索，这样它就不会第二次过滤我的结果。

原因是，我的 SQL 代码也会搜索用户 ID，因此如果我键入 "mscott"，我的 servlet returns "Mike Scott" 将被放入usernames数组。

我希望他们能够 select "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});

  });

Answer 1

来自jQuery UI API:

search( [value ] )

Triggers a search event and invokes the data source if the event is not canceled. Can be used by a selectbox-like button to open the suggestions when clicked. When invoked with no parameters, the current input's value is used. Can be called with an empty string and minLength: 0 to display all items.

可以这样执行：

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

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

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

Answer 2

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

我的问题是因为我的结果是预过滤的，我正在重置 usernames 键上的数组以显示一组全新的结果。

但是，下面的代码： usernames = []; 不是重置当前数组的好方法，因为变量被重新声明并且 对原始数组（自动完成使用的）的引用丢失 。所以我的控制台显示我的用户名数组有新值，但自动完成根本没有显示任何新值。

感谢@Twisty 提供帮助，尽管我没有提供我正在使用的一些代码。他的 fiddle 帮助我清理了很多东西。

我最终使用以下方法清除了数组：

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

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

jQuery autocomplete pre-filtered results - show all

jquery

jquery-ui

autocomplete

jquery-ui-autocomplete