CODEWITHSUNDEEP
jquery-uijquery-autocomplete
Falco
Falco

Reputation: 87

Search on multiple values with jquery autocomplete

Hi I'm trying to get the jQuery UI autocomplete widget to work so that it searches for matches from multiple attributes of my array but something does not work in my code. For the moment

The idea it is if I type "coupe", response will be "Porsche, Audi, Mercedes". In the same way I will able to type '911' and receive as response "Porsche". Thanks for your help.

$(function() {

var cars =
[
    {   "constructor" : "BMW", 
        "model": "Z3", 
        "type": "cabrio" },

    {   "constructor" : "Porsche", 
        "model": "911", 
        "type": "coupe" },

    {   "constructor" : "Audi", 
        "model": "A3", 
        "type": "coupe" },

    {   "constructor" : "Mercedes", 
        "model": "SL500", 
        "type": "coupe" }
];

    $("#quickFind").autocomplete({
        source: function(request, response){
            var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
            response( $.grep( cars, function( value ) {
            return matcher.test(value.constructor) || matcher.test(value.model) || matcher.test(value.type);
        }));
        }
    });

  });

Upvotes: 1

Views: 2448

Answers (1)

Guilherme
Guilherme

Reputation: 1146

On each object of your cars array is missing the "label" and "value" options, take a look: http://jsfiddle.net/DLLVw/77/

$(function() {

var cars =
[
    {   
        "label" : "BMW - Z3 - cabrio",
        "value" : "BMWZ3",
        "constructor" : "BMW", 
        "model": "Z3", 
        "type": "cabrio" },

    {   
         "label" : "Porsche - 911 - coupe",
        "value" : "Porsche911",
        "constructor" : "Porsche", 
        "model": "911", 
        "type": "coupe" },

    {   "label" : "Audi - A3 - coupe",
        "value" : "AudiA3",

         "constructor" : "Audi", 
        "model": "A3", 
        "type": "coupe" },

    {   
        "label" : "Mercedes - SL500 - coupe",
        "value" : "mercedessl500",
        "constructor" : "Mercedes", 
        "model": "SL500", 
        "type": "coupe" }
];

    $("#quickFind").autocomplete({
        source: function(request, response){
            var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
            response( $.grep( cars, function( value ) {
            return matcher.test(value['constructor']) || matcher.test(value.model) || matcher.test(value.type);
        }));
        }
    });

  });

Upvotes: 2

Related Questions