jQuery UI自动完成小部件searchconfiguration
我正在研究使用jQuery UI自动填充小部件来实现用户查找名字或姓氏。 看起来像默认情况下，自动完成function可以按字符顺序查找单词，而不pipe单词是否出现在单词中。 所以，如果你有这样的数据： javascript, asp, haskell ，你input'as'你会得到这三个。 我希望它只匹配单词的开头。 所以在上面的例子中你只能得到'asp' 。 有没有办法configuration自动完成小部件来做到这一点？
最终，比如在Gmail中， 以名字或姓氏的开头来匹配会更好。
注：我试图找出一种方法来使用jQuery UI小部件来做到这一点。 由于我已经在我的项目中使用了jQuery UI，因此我打算坚持使用它，并且不要将其他库添加到我的Web应用程序中。
在jQuery UI v1.8rc3中， 自动完成小部件接受一个源选项，它可以是string，数组或callback函数。 如果是string，则自动完成在该URL上执行GET以获取选项/build议。 如果是一个数组，autocomplete会像您所指出的那样进行search，以查找数组中各个位置中是否存在键入的字符。 最后的变体是你想要的 – callback函数。
从自动完成文档：
第三个变体，callback，提供了最大的灵活性，可以用来连接任何数据源自动完成。 callback得到两个参数：
•一个
request对象，具有一个名为“term”的单个属性，它引用文本input中当前的值。 例如，当用户在设置为自动完成的城市字段中input“new yo”时，request.term将保持“new yo”。
•一个response函数，一个callback函数，它需要一个参数来包含要提示给用户的数据。 此数据应根据提供的术语进行过滤，并且必须是允许使用简单本地数据的格式的数组：string数组或带有标签/值/两个属性的对象数组。
示例代码：
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);这逃避了search词，以便在用户键入的文本中的任何正则expression式有意义的术语被视为纯文本。 例如，点（。）对正则expression式有意义。 通过阅读自动完成源代码，我学到了这个escapeRegex函数。 -
new Regexp()。 它指定一个以^（Circumflex）开始的正则expression式，这意味着，只有在数组中出现的字符出现在数组的开头时，它才会匹配，这就是你想要的。 它也使用“i”选项，这意味着不区分大小写的匹配。 -
$.grep()实用程序只是在提供的数组中的每个术语上调用提供的函数。 在这种情况下，函数只是使用正则expression式来查看数组中的项是否匹配input的内容。 - 最后，调用responseFn（）和search结果。
工作演示： http : //jsbin.com/ezifi
它看起来像：
只是一个说明：我发现在这一点上自动完成的文档相当不成熟。 我没有find这样做的例子，我找不到工作文档，哪些.css文件是必要的或哪些.css类将被使用。 我从检查代码中学到了这一切。
另请参阅我如何自定义格式化自动完成插件结果？
我使用devbridge的自动完成function。 http://www.devbridge.com/projects/autocomplete/jquery/
它只匹配开始的字符。
替代文字160wpb4.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选项可以是列表或对象。 以上显示了一个简单的列表。 如果您希望将某些数据附加到返回的build议中，请将lookup选项设置为一个对象，如下所示：
var lookuplist = { suggestions: [ "Jan", "Feb", "Mar", "Apr", "May" ], data : [ 31, 28, 31, 30, 31, ] };
thx 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”
如果你想searchstring中每个单词的开头，对于henchman的更优雅的解决scheme是采取cheeso的，但只使用正则expression式字边界特殊字符：
var matcher = new RegExp( "\\b" + re, "i" );
例如： http : //jsbin.com/utojoh/2 （尝试search'bl'）
还有另一个jQuery自动完成插件 ，可以在每个项目的开始处selectsearch（选项是matchContains=false ，我认为这也是默认的）。
鉴于jQuery UI插件中没有这样的选项，我猜你将不得不使用不同的插件，或者重写现在使用的插件。
你在哪里得到的数据填充自动完成？ 它来自数据库吗？ 如果是这样，你可以在你的查询中做你想要的，只返回匹配每个单词开头的结果（first / last name）
