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:
The
sourceoption takes arequestandresponseparameter. Basically, you manipulaterequest.term(replace the dashes with an empty string) before comparing it with the list of valid values.Then, call the
responsefunction with the correct results. This example uses$.mapto 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/
加载中,请稍侯......
精彩评论