CODEWITHSUNDEEP
javascriptjqueryjsonautocomplete
Jacob
Jacob

Reputation: 3

Autocomplete with json file

I've been having some trouble getting autocomplete to work specifically with a json file I have been given. I am unsure if this needs to have a php workaround or not, maybe its just a mess of errors in my jquery. However, this is using the autocomplete tool.

Any help at all with this is greatly appreciated.

The javascript - Yes the forms are all labeled correctly.

$(document).ready(function() {
    $('#autocomplete').autocomplete({
        source: function(request, response) {
            $.getJSON('data/destination.json', { q: request.term }, function(result) {
                response($.map(result, function(item) {
                return item.value;
            }));
        });
    }
});

The JSON file

{
"destinations": [
    {
        "value": "Oceania and Australia",
        "label": "Australia & South Pacific"
    },
    {
        "value": "Australia",
        "label": "Australia"
    },
    {
        "value": "Brisbane",
        "label": "Brisbane Australia"
    },
    {
        "value": "GoldCoast",
        "label": "GoldCoast-Australia"
    },
    {
        "value": "SunshineCoast",
        "label": "SunshineCoast-Australia"
    },

And it goes on like that.

Thanks for any help!

Upvotes: 0

Views: 3002

Answers (1)

xdazz
xdazz

Reputation: 160833

Try below. You should apply $.map at the destinations of your json data.

    source: function(request, response) {
        $.getJSON('data/destination.json', { q: request.term }, function(data) {
            response($.map(data.destinations, function(item) {
            return item.value;
        }));
    });

Upvotes: 1

Related Questions