How to use a JSon array in a JQuery autocomplete

Question

I have a JSon array which is as follows:

[{"country":"FR","id":2,"latitude":-34.27175846153846,"longitude":54.16125384615385,"postcode":"00000","region1":"DOM-TOM","region2":"Terres australes et antarctiques","region3":"Crozet","region4":"","version":null},{"country":"FR","id":3,"latitude":46.203635000000006,"longitude":5.20772,"postcode":"01000","region1":"Rhône-Alpes","region2":"Ain","region3":"Bourg-en-Bresse","region4":"Bourg-en-Bresse","version":null}, ...

I am trying to use this array as a source for a JQuery autocomplete. Here is what I attempted:

$(function() {
    $("#postcode").autocomplete({
        source : function(request, response) {
            var firstChars = $("#postcode").attr("value");
            $.getJSON("/kadjoukor/geolocations", {
                postcodeFirstChars : firstChars
            }, function(data) {
                console.log(data.postcode);
                response(data.postcode);
            });
        },
        minLength : 3,
    });
});

Here is the html:

<input type="text" name="member.geolocation.postcode" value="" id="postcode" placeholder="Code postal" />

I want to display the postcode variable from this JSon array. Can anyone please help?

$("#postcode").attr("value"); should be request.term after that, you need to use $.map to turn your array into the array format that is expected by autocomplete. There is(was?) a good example of that in the api documentation at jqueryui.com — user400654
– user400654, Commented Oct 23, 2012 at 15:48
@KevinB, Can you please include a code snippet? I am not sure where to use the request.term in the js code... Also what is the array format expected by autocomplete? — balteo
– balteo, Commented Oct 23, 2012 at 15:54
Thanks. I saw this example (remote-jsonp) but it merely logs the result into another div whereas I want the result to appear in the input field. — balteo
– balteo, Commented Oct 23, 2012 at 15:56

lavrik · Accepted Answer · 2012-10-23 15:56:59Z

2

You should transform the the result array to label-value pairs. In your case in can be like

source : function(request, response) {
        var firstChars = $("#postcode").attr("value");
        $.getJSON("/kadjoukor/geolocations", {
            postcodeFirstChars : firstChars
        }, function(data) {
            console.log(data.postcode);
            response($.map(data, function (item) {
                    return {
                        label: item.postcode,
                        value: item.postcode
                    };
                }));
        });
    },

answered Oct 23, 2012 at 15:56

lavrik

1,47414 silver badges25 bronze badges

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

3 Comments

balteo Over a year ago

Hi Lavrik. Thanks for the code. I am not sure how to get to the postcode variable given the json array. It seems data.postcode does not work in the console.log...

balteo Over a year ago

Somehow the console.log(data.postcode); line caused the autocompete not to work. By removing this line it now works. Thanks a lot Lavrik!!

lavrik Over a year ago

You are welcome :) And yes, your sample data was in square brackets, means it's an array )

Collectives™ on Stack Overflow

How to use a JSon array in a JQuery autocomplete

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related