javascript - How can I change the result filter in Autocomplete? - Stack Overflow

admin管理员组

文章数量:1325021

Instead of making a literal match I'd like to select results by regular expression.

Can I override Autoplete's default behavior to acplish this or do I need an alternate structure?

Instead of making a literal match I'd like to select results by regular expression.

Can I override Autoplete's default behavior to acplish this or do I need an alternate structure?

• javascript
• jquery
• jquery-ui
• autoplete
• jquery-ui-autoplete

Share Improve this question Follow edited Dec 11, 2012 at 21:11 Andrew Whitaker 126k3232 gold badges295295 silver badges308308 bronze badges asked May 18, 2011 at 9:59 user474632user474632 31111 gold badge33 silver badges1111 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

There is a built-in way to do this: just provide a function for the source option in the autoplete widget:

var items = ['Foo', 'Bar', 'Hello', 'Goodbye', '1234'];


$("#autoplete").autoplete({
    source: function(request, response) {
        // The term the user searched for;
        var term = request.term;

        // Extract matching items:
        var matches = $.grep(items, function(item, index) {
            // Build your regex here:
            return /\d+/.test(item);
        });

        // let autoplete know the results:
        response(matches);
    }
});

http://jsfiddle/RSyrX/

Note that this example will always return "1234" because of the simple regular expression I used. Something more useful would probably be to build the regex based on the term (also possible).

This is actually very similar to the way that the widget itself filters results. Check out this line for the filter function and this line to see how it's called if you supply an array as the source option.

I've created an example in which only results containing the string 'jQuery' in the label are rendered:

var projects = [
    {
    value: "jquery",
    label: "jQuery",
    desc: "the write less, do more, JavaScript library",
    icon: "jquery_32x32.png"},
{
    value: "jquery-ui",
    label: "jQuery UI",
    desc: "the official user interface library for jQuery",
    icon: "jqueryui_32x32.png"},
{
    value: "sizzlejs",
    label: "Sizzle JS",
    desc: "a pure-JavaScript CSS selector engine",
    icon: "sizzlejs_32x32.png"}
];

$("input").autoplete({
    source: projects
}).data("autoplete")._renderItem = function(ul, item) {

    // this is where you can implement your regex
    if (item.label.indexOf("jQuery") !== -1) {
        return $("<li></li>").data("item.autoplete", item).append("<a>" + item.label + "<br>" + item.desc + "</a>").appendTo(ul);
    }
};

Demo here.

Ya you can override jQueryUI's autoplete's default behaviour. In your controller you should write your server side logic to generate the result set. jQuery autplete by default uses q as parameter. Using which you can get the values and generate the result set which will be a list. I think this will give you an idea. Autoplete just displays the result on each key storke. You should take care of displaying logic

本文标签： javascriptHow can I change the result filter in AutocompleteStack Overflow