我有一个自动完成框(出于本示例的目的,因为它是一个简单的示例)返回一个包含社会安全号码的列表。为了便于阅读,它们中有破折号。我想修改自动完成功能,以便如果我输入“123456789”或“123-45-6789”,它将在自动完成功能中找到相同的条目,而不必将两种样式添加到自动完成源中。我一直在考虑添加回调search
,但我对如何实现这一目标却一无所知。
如果我使用从 AJAX 源提取的搜索,我可以简单地修剪服务器端的输入并返回我想要的任何结果。然而,为了速度起见,我已将所有数据预先加载到 JavaScript 中,因此该选项已被排除。
基本上,我想知道如何在将自动完成输入与存储的数据进行比较之前修剪破折号(并且最好将其与也修剪破折号的存储数据的副本进行比较)。关于如何使用的文档几乎为零search:
选项,所以我希望有人能提供帮助。
做到这一点的一种方法是向source http://jqueryui.com/demos/autocomplete/#option-source自动完成选项:
var ssn = ['123-45-6789', '333-44-5543', '111-34-9696', '555-99-5323'];
$("#ssn").autocomplete({
source: function(request, response) {
/* Remove the dashes from the search term: */
var term = request.term.replace(/-/g, '');
var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i");
response($.map(ssn, function(el) {
/* Remove dashes from the source and compare with the term: */
if (matcher.test(el.replace(/-/g, ''))) {
return el;
}
}));
}
});
这是发生的事情:
The source
选项需要一个request
and response
范围。基本上,你操纵request.term
(将破折号替换为空字符串),然后将其与有效值列表进行比较。
然后,致电response
函数具有正确的结果。本示例使用$.map http://api.jquery.com/jQuery.map/返回匹配列表,将术语与列表中的每个项目进行比较(不带“-”)。
这是一个工作示例:http://jsfiddle.net/andrewwhitaker/r4SzC/ http://jsfiddle.net/andrewwhitaker/r4SzC/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)