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;
            }
        }));
    }
});

这是发生了什么：

source选项需要request和response参数。基本上，在将其与有效值列表进行比较之前，您操纵request.term（用空字符串替换短划线）。
然后，使用正确的结果调用response函数。此示例使用$.map返回匹配列表，将术语与列表中的每个项目进行比较（不带“ - ”）。

以下是一个有效的例子：http://jsfiddle.net/andrewwhitaker/r4SzC/

如何在搜索之前将输入编辑为jQuery自动完成？

1 个答案: