jquery-ui - Autocomplete for json data

Question

I have this type of json input. [ { "id1" : "val1", "id2" : "val2" }, { "id1" : "val3", "id2" : "val4" }, ...]

How do I parse this inside autocomplete plugin available in jquery-ui? Basically I want the val1, val3, etc. corresponding to id1 to be the part of my autocomplete text. Any suggestions on how can I proceed with this?

Is this from a remote or local data source? Can you show your autocomplete code? — Andrew Whitaker
– Andrew Whitaker, Commented May 21, 2012 at 12:53
It is from a local data source which I prepared from my sql table. Actually i didn't want to fire "like" query everytime when user enters something. — Ankit Garg
– Ankit Garg, Commented May 22, 2012 at 11:22

Andrew Whitaker · Accepted Answer · 2012-05-22 11:59:52Z

1

The autocomplete widget expects an array of simple string values or objects with properties label, value or both.

You can take your data and transform it into the proper format using the $.map utility function. This assumes you are making your AJAX request successfully and data is coming back:

$.getJSON("/url", function(data) {
    var src = $.map(function (el) {
        return el.id1;
        // or:
        // return { label: el.id1, value el.id2 };
    });

    $("#id").autocomplete({ 
        source: src
    });
});

Example: http://jsfiddle.net/df6wB/

answered May 22, 2012 at 11:59

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ankit Garg Over a year ago

Thanks!! It did work. I was also thinking that there should be some mapping possible for the array elements. thanks for your answer. The link was also useful :)

Sampo Sarrala · Accepted Answer · 2012-05-21 07:58:02Z

0

To convert JSON string to JSON object use $.parseJSON( ... ). Here var jsonstring is text that contains JSON text and nothing else. parseJSON() will fail if string is not valid JSON.

var jsonobj = $.parseJSON( jsonstring );

Then use that to insert new options to autocomplete.

Get values from jsonobj this way:

alert( jsonobj.id1 ); 
alert( jsonobj.id2 );

answered May 21, 2012 at 7:58

Sampo Sarrala

4,8612 gold badges27 silver badges49 bronze badges

3 Comments

Ankit Garg Over a year ago

Here jsonstring is an array as defined in my earlier post. I'm trying that array but the jsonobj is being returned as null. Any pointers on this??

Sampo Sarrala Over a year ago

If it is already object then you dont need to $.parseJSON(), you should add more details to your question to get better answers. Few lines of source code is worth more than thousand words.

Ankit Garg Over a year ago

I'm using this

$(document).ready(function () { var sA = []; $.getJSON("URL to my json object array", function(data) { $.each(data, function (i, val) { sA.push(val.v); }); $("#id").autocomplete( { source : sA, minLength: 2, cache : false });

Collectives™ on Stack Overflow

jquery-ui - Autocomplete for json data

2 Answers 2

1 Comment

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Related