jQuery UI 自动完成小部件搜索配置

Question

我正在考虑使用 jQuery UI 自动完成 小部件来实现按名字或姓氏进行用户查找。看起来默认情况下，自动完成功能会按字符序列查找单词，无论它出现在单词中。因此，如果您有诸如：javascript、asp、haskell 之类的数据，并且输入 'as'，您将获得所有这三个数据。我希望它只匹配单词的开头。所以在上面的例子中你只得到'asp'。有没有办法配置自动完成小部件来执行此操作？

最终，最好按名字或姓氏的开头进行匹配，例如它在 Gmail 中。

注意：我正在尝试找出一种专门使用 jQuery UI 小部件来执行此操作的方法。由于我已经在我的项目中使用了 jQuery UI，因此我打算坚持使用它并尝试不向我的 Web 应用程序添加其他库。

Answer 1

在 jQuery UI v1.8rc3 中，自动完成小部件 接受 source 选项，可以是字符串、数组或回调函数。如果它是字符串，自动完成功能会对该 URL 执行 GET 操作以获取选项/建议。如果是数组，则自动完成功能会进行搜索，正如您所指出的，在数组项中的任何位置中是否存在类型化字符。最后一个变体就是您想要的——回调函数。

来自自动完成文档：

第三种变体，即回调，提供了最大的灵活性，可用于将任何数据源连接到自动完成。回调有两个参数：

• 一个request 对象，具有一个名为“term”的属性，它指的是文本输入中当前的值。例如，当用户在设置为自动完成的城市字段中输入“new yo”时，request.term 将保留“new yo”。
• 一个response 函数，一个回调函数，它期望单个参数包含向用户建议的数据。应根据提供的术语过滤此数据，并且必须是简单本地数据允许的格式的数组：具有标签/值/两个属性的字符串数组或对象数组。

示例代码：

var wordlist= [ "about", "above", "across", "after", "against",
                "along", "among", "around", "at", "before", 
                "behind", "below", "beneath", "beside", "between", 
                "beyond", "but", "by", "despite", "down", "during", 
                "except", "for", "from", "in", "inside", "into", 
                "like", "near", "of", "off", "on", "onto", "out", 
                "outside", "over", "past", "since", "through", 
                "throughout", "till", "to", "toward", "under", 
                "underneath", "until", "up", "upon", "with", 
                "within", "without"] ; 

$("#input1").autocomplete({
    // The source option can be an array of terms.  In this case, if
    // the typed characters appear in any position in a term, then the
    // term is included in the autocomplete list.
    // The source option can also be a function that performs the search,
    // and calls a response function with the matched entries.
    source: function(req, responseFn) {
        var re = $.ui.autocomplete.escapeRegex(req.term);
        var matcher = new RegExp( "^" + re, "i" );
        var a = $.grep( wordlist, function(item,index){
            return matcher.test(item);
        });
        responseFn( a );
    }
});

几个关键点：

• 对 $.ui.autocomplete.escapeRegex(req.term); 的调用转义搜索词
  以便用户键入的文本中任何对正则表达式有意义的术语都被视为纯文本。例如，点 (.) 对正则表达式有意义。我通过阅读自动完成源代码了解了这个 escapeRegex 函数。
• 带有 new Regexp() 的行。它指定一个以 ^ (Circumflex) 开头的正则表达式，这意味着，仅当键入的字符出现在数组中术语的开头时才会匹配，这正是您想要的。它还使用“i”选项，这意味着不区分大小写的匹配。
• $.grep() 实用程序仅对提供的​​数组中的每个项调用提供的函数。本例中的函数只是使用正则表达式来查看数组中的术语是否与键入的内容匹配。
• 最后，使用搜索结果调用responseFn()。

工作演示：http://jsbin.com/ezifi

它看起来像：

请注意：我发现有关自动完成的文档目前还相当不成熟。我没有找到执行此操作的示例，也找不到关于哪些 .css 文件是必需的或将使用哪些 .css 类的工作文档。我通过检查代码了解到了这一切。

另请参阅如何自定义格式自动完成插件结果？

Answer 2

感谢 cheeso 介绍 jsbin.com，

我扩展了您的代码以支持名字和姓氏匹配。

  $("#input1").autocomplete({
      source: function(req, responseFn) {
          addMessage("search on: '" + req.term + "'<br/>");

          var matches = new Array();
          var needle = req.term.toLowerCase();

          var len = wordlist.length;
          for(i = 0; i < len; ++i)
          {
              var haystack = wordlist[i].toLowerCase();
              if(haystack.indexOf(needle) == 0 ||
                 haystack.indexOf(" " + needle) != -1)
              {
                  matches.push(wordlist[i]);
              }
          }

          addMessage("Result: " + matches.length + " items<br/>");
          responseFn( matches );
      }
  });

演示： http://jsbin.com/ufimu3/

输入 'an' 或 're'

Answer 3

我使用 devbridge 的自动完成功能。 http://www.devbridge.com/projects/autocomplete/jquery/

仅匹配开头字符。

至于基于名字或姓氏的匹配，您只需提供包含名字和姓氏的查找列表。

用法示例：

  var wordlist = [
      'January', 'February', 'March', 'April', 'May', 'June',
      'July', 'August', 'September', 'October', 'November',
      'December' ]; 

      var acOptions = {
          minChars:2,
          delimiter: /(,|;)\s*/, // regex or character
          maxHeight:400,
          width:300,
          zIndex: 9999,
          deferRequestBy: 10, // miliseconds

          // callback function:
          onSelect: function(value, data){
              //$('#input1').autocomplete(acOptions);
              if (typeof data == "undefined") {
                  alert('You selected: ' + value );
              }else {
                  alert('You selected: ' + value + ', ' + data);
              }
          },

          // local autosuggest options:
          lookup: wordlist
      };

用于初始化自动完成控件的 lookup 选项可以是列表或对象。上面显示了一个简单的列表。如果您希望将一些数据附加到返回的建议中，请将 lookup 选项设置为一个对象，如下所示：

var lookuplist = {
    suggestions:   [ "Jan", "Feb", "Mar", "Apr", "May" ],
    data :         [ 31, 28, 31, 30, 31, ]
};

Answer 4

如果您想搜索字符串中每个单词的开头，对 henchman 的一个更优雅的解决方案是采用 cheeso's 但仅使用正则表达式单词边界特殊字符：

var matcher = new RegExp( "\\b" + re, "i" );

示例： http://jsbin.com/utojoh/2（尝试搜索“bl”）

Answer 5

还有另一个 jQuery 自动完成插件，它可以选择在每个项目的开头进行搜索（选项是 matchContains=false，我认为这是也是默认的）。

鉴于 jQuery UI 插件中缺少这样的选项，我猜您要么必须使用不同的插件，要么重写您现在使用的插件。

Answer 6

您从哪里获取数据来填充自动完成？是来自数据库吗？如果是这样，您可以在查询中执行您想要的操作，并且仅返回与每个单词开头（名字/姓氏）匹配的结果