我正在研究使用jQuery UI自动完成小部件来实现按名字查找用户，可以是名字的第一个字母或最后一个字母。默认情况下，自动完成会根据字符序列查找单词，而不管其在单词中出现的位置。因此，如果您有以下数据：javascript、asp、haskell，并且您键入'as'，则会返回所有三个结果。 我想让它只匹配单词的开头。所以在上面的例子中，您只会得到'asp' 。 有没有办法配置自动完成小部件来实现这一点？
最终，最好能够像Gmail一样，根据名字的开头匹配或末尾。
注意：我正在尝试找出一种使用特定的jQuery UI小部件来实现这一点的方法。由于我的项目已经在使用jQuery UI，因此我计划坚持使用它，并尝试不向我的Web应用程序添加其他库。
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()使用搜索结果调用。
escapeRegex 具体是用来做什么的，你的帖子完美地解释了它。 - Tauren[{"name":"SIK1B","organism":"Homo sapiens"},{"name":"Nep2","organism":"Drosophila melanogaster"}]。 - Brian Wiley感谢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 );
}
});
输入 'an' 或 're'
我使用的是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, ]
};
如果您想在字符串中搜索每个单词的开头，一种更优雅的解决方案是采用cheeso的正则表达式单词边界特殊字符：
var matcher = new RegExp( "\\b" + re, "i" );
示例：http://jsbin.com/utojoh/2（尝试搜索“bl”）
有另一个jQuery自动完成插件，它可以选择仅在每个项目开头进行搜索（该选项为matchContains=false，我认为这也是默认设置）。
鉴于jQuery UI插件中没有此选项，我猜想您必须使用不同的插件或重新编写您现在正在使用的插件。