如何在搜索之前编辑输入到 jQuery Autocomplete？

Question

我有一个自动完成框（出于此示例的目的，因为它是一个简单的示例）返回一个包含社会安全号码的列表。为了便于阅读，它们中有破折号。我想修改自动完成，如果我输入“123456789”或“123-45-6789”，它会在自动完成中找到相同的条目，而不必将两种样式都添加到自动完成源中。我一直在考虑向search 添加回调，但我对如何实现这一点持空白。

如果我使用从 AJAX 源中提取的搜索，我可以简单地修剪输入服务器端并返回我想要的任何结果。但是，为了速度，我已将所有数据预加载到 Javascript 中，因此该选项已失效。

基本上，我想知道如何在将自动完成输入与存储的数据进行比较之前修剪破折号（最好将其与存储数据的副本进行比较，同时修剪破折号）。关于如何使用search: 选项的文档几乎为零，所以我希望有人能提供帮助。

Answer 1

一种方法是为自动完成的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;
            }
        }));
    }
});

这是怎么回事：

1. source 选项采用request 和response 参数。基本上，在将request.term 与有效值列表进行比较之前，您可以操作request.term（用空字符串替换破折号）。

2. 然后，调用response 函数并得到正确的结果。此示例使用 $.map 返回匹配列表，将术语与列表中的每个项目进行比较（不带“-”）。

这是一个工作示例：http://jsfiddle.net/andrewwhitaker/r4SzC/