Search on multiple values with jquery autocomplete

Question

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

  });

Guilherme · Accepted Answer · 2013-11-15 16:33:22Z

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

  });

Collectives™ on Stack Overflow

Search on multiple values with jquery autocomplete

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related