搜索前如何在jQuery Autocomplete中编辑输入? [英] How to edit input into jQuery Autocomplete before search?

问题描述

我有一个自动完成框(出于本示例的目的，因为它是一个简单的示例)，它返回一个包含社会保险号的列表.这些中有破折号以提高可读性.我想修改自动完成功能，以便如果我输入"123456789"或"123-45-6789"，它将在自动完成功能中找到相同的条目，而不必将两种样式都添加到自动完成功能源中.我一直在寻找向search添加回调的方法，但是我在如何完成此操作上画了一个空白.

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

基本上，我想知道如何在将自动完成输入与存储的数据进行比较之前修剪掉短划线(并且最好将其与也修剪了短划线的存储数据的副本进行比较).关于如何使用search:选项的文档几乎为零，因此我希望有人可以提供帮助.

解决方案

一种方法是为 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(用空字符串替换破折号)之前，先将其与有效值列表进行比较.

2. 然后，以正确的结果调用response函数.本示例使用 $.map 返回匹配项列表，将术语与列表(不带-").

这是一个有效的示例: http://jsfiddle.net/andrewwhitaker/r4SzC/

I have an autocomplete box that (for the purposes of this example, since it's a simple example) returns a list including social security numbers. These have dashes in them for readability. I want to modify the autocomplete so that if I put in "123456789" or "123-45-6789", it will find the same entry in the autocomplete, without having to add both styles to the autocomplete source. I've been looking at adding a callback to search, but I'm drawing a blank on exactly how to accomplish this.

If I were using a search that pulled from an AJAX source, I could simply trim the input server-side and return whatever results I wanted. However, for speed's sake, I've pre-loaded all of the data into the Javascript, so that option's out.

Basically, I want to know how to trim dashes off autocomplete input before comparing it to the stored data (and, preferably, comparing it to a copy of the stored data also with dashes trimmed). There's almost zero documentation on how to use the search: option, so I'm hoping someone can help.

解决方案

One way to do this would be to provide a function to the source option of autocomplete:

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

Here's what's going on:

1. The source option takes a request and response parameter. Basically, you manipulate request.term (replace the dashes with an empty string) before comparing it with the list of valid values.

2. Then, call the response function with the correct results. This example uses $.map to return a list of matches, comparing the term to each item in the list (without the "-").

Here's a working example: http://jsfiddle.net/andrewwhitaker/r4SzC/

这篇关于搜索前如何在jQuery Autocomplete中编辑输入?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！