jQuery Autocomplete UI search all directions

I'm using jQuery Autocomplete to show results from a list of approximately 2000 records. Because this list is in my opinion very long I need a good filter to search through all these records.

I already modified the source so that I was able to search not only in the label field, but also in the value field. What I now want is that I can do a search for "S4 galaxy" where it wil find the "Samsung Galaxy S4". The standard jquery autocomplete can only search from left to right, so "galaxy s4" will be found, but not "s4 galaxy". I also want to look at "gal s4" and find the "Samsung Galaxy S4".

As an extra, it would be nice if the match is made bold > "Samsung Galaxy S4"

The complete code I now use stands below:

var completeResults = [{
    value: "S4 iv",
    label: "Samsung Galaxy S4",
    image: "samsung_galaxy_s_iv_1.jpg"
}, {
    value: "stackoverflow",
    label: "Nokia lumia 920",
    image: "nokia_lumia_920_1.jpg"
}];

completeResults is now a short list! Normaly about 2000 records.

function custom_source(request, response) {
    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
    response($.grep(completeResults, function (value) {
        return matcher.test(value.value) || matcher.test(value.label);
    }));
}

$("#s").autocomplete({
    source: custom_source,
    minLength: 0
}).data("ui-autocomplete")._renderItem = function (ul, item) {
    var inner_html = "<a><img src='../img/type/120x200/" + item.image + "' width='21' height='35'/><span class='title'>" + item.label + "</span></a>";

    return $("<li></li>")
        .data("item.autocomplete", item)
        .append(inner_html)
        .appendTo(ul);
};

Answers


Okay here's something that should work (minus the bolding of text, which I'll get to). Basically the strategy is to:

  1. Create a regular expression out of each term the user types. We can do that by splitting the input on ' '.
  2. For every choice in the list of possible choices, see if that choice matches every single regex we extracted in step 1.
  3. Only return the values that meet the criteria in step 2.
function custom_source(request, response) { 
    // Create an array of regular expressions from the user's input:
    var terms = $.map(request.term.split(' '), function (term) {
        // Ignore just whitespace:
        if ($.trim(term)) {
            return new RegExp($.ui.autocomplete.escapeRegex(term), 'i');
        }
    });

    response($.grep(completeResults, function (value) {
        var found = true
            , i
            , regex;

        // For every result, iterate over every term we extracted earlier and make sure it matches:
        for (i = 0; i < terms.length && found; i++) {
            regex = terms[i];
            found = found && (regex.test(value.value) || regex.test(value.label));
        }

        return found;
    }));
}

Example: http://jsfiddle.net/Aa5nK/73/

The other part of your question is answered in the following question:

jQueryUI: how can I custom-format the Autocomplete plug-in results?


Need Your Help