CODEWITHSUNDEEP
javascriptjqueryarraysjson
Sideshow
Sideshow

Reputation: 1351

Jquery matching an element from a JSON array

I currently have a JSON callback containing both an id an a name as below:

[{"id":"1","name":"Wired Motors"},
{"id":"2","name":"pragma innovations"},
{"id":"3","name":"University of Femme Fatales"}]

I am using jQuery UI autocomplete which needs to match the name section of the returned result and display this in the suggest drop down and also be able to drag in the id into a html data element.

So far I am not having much luck in matching the user input to the name section of the callback. I can do this with a clean array but not sure how to do this with a JSON array

Upvotes: 1

Views: 544

Answers (1)

MackieeE
MackieeE

Reputation: 11862

I believe the jQuery Autocomplete uses a standardised Name => Value JSON Array format of:

[{ "label" : "1", "value" : "Wired Motors" },
 { "label" : "2", "value" : "pragma innovations"},
 { "label" : "3", "value" : "University of Femme Fatales"}]

Soruce: jQuery Autocomplete Source API

You can then add them to the Autocomplete Source/Suggestions:

$('#myautocomplete').autocomplete({
    minLength : 2,
    source : function( request, response ) {
       $.ajax({
           url: 'path-to-your-script.php',
           dataType: 'json',
           data: '?variablestodb=somedata',
               success: function( data ) {
               response( $.map( data, function( item ) {
                   return {
                      label: item.label,
                      value: item.value
                     }
                  }));
                }
            });
        },
        select: function( event, ui ) {

        }
    });

Upvotes: 1

Related Questions