Question

我正在研究使用jQuery UI autocomplete小部件来按名字或姓氏实现用户查找。看起来默认情况下，自动完成按字符顺序查找单词，无论它出现在单词中。因此，如果您拥有以下数据：javascript, asp, haskell并输入'as'，那么您将获得所有这三项数据。我希望它只匹配单词的开头。因此，在上面的示例中，您只获得'asp'。有没有办法配置自动完成小部件来执行此操作？

最终，match by beginning of first or last name会像在Gmail中一样更好。

注意：我正在尝试使用jQuery UI小部件专门找到一种方法。由于我已经在我的项目中使用jQuery UI，我计划坚持使用它并尝试不向我的Web应用程序添加额外的库。

Answer 1

在jQuery UI v1.8rc3中，the autocomplete widget接受source选项，该选项可以是字符串，数组或回调函数。如果它是一个字符串，自动完成功能会对该URL进行GET以获取选项/建议。如果数组，自动完成执行搜索，正如您所指出的那样，在数组术语中的任何位置都存在类型化的字符。最终的变体是你想要的 - 回调函数。

从自动填充文档：

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

•request对象，具有名为“term”的单个属性，该属性引用文本输入中当前的值。例如，当用户在设置为执行自动填充的城市字段中输入“new yo”时，request.term将保留“new yo”。   •response函数，一种回调，它要求单个参数包含要向用户建议的数据。此数据应根据提供的术语进行过滤，并且必须是允许简单本地数据格式的数组：String-Array或具有label / value / both属性的Object-Array。

示例代码：

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

它的样子：

alt text

请注意：我发现自动完成的文档在这一点上还不成熟。我找不到这样做的例子，我找不到工作文件，其中.css文件是必需的，或者使用哪些.css类。我从检查代码中学到了这一切。

另见how can I custom-format the Autocomplete plug-in results?

Answer 2

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

仅匹配起始字符。

alt text http://i46.tinypic.com/2ihq7pd.jpg

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

使用示例：

  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 3

thx cheese介绍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 4

如果你想搜索字符串中每个单词的开头，对于henchman来说更优雅的解决方案是使用cheeso，但只使用正则表达式单词边界特殊字符：

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

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

Answer 5

有another jQuery autocomplete plug-in可选择在每个项目的开头搜索（选项为matchContains=false，我认为这也是默认项目。）

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

Answer 6

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

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

6 个答案: