Question

I’m really struggling trying to use the jQuery UI autocomplete plugin. I’ve had a look at a few demos but I still can’t seem to get it to work properly. What I want to do is bring the data from my json file called destination.json.

This is what I have so far:

$( "#autocomplete" ).autocomplete({ 
    source: function(request, response) { 
        $.ajax({ 
            url: "data/destination.json", 
            dataType: "json", 
            success: function( data ) { 
                response(data.destinations); 
            } 
        }); 
    } 
}); 

& the HTML

<div class="left">Destination</div>
<div class="right"><input name="autocomplete" type="text" size="27" id="autocomplete"/></div>
<div class="clear"></div>

What am I doing wrong? Thank you!

& the JSON

{
"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"
    } 
 ]
}

Answer 1

The source can point directly to a URL that will give a JSON response.

$("#ac").autocomplete({
    source: "data/destination.json",
    minLength: 2,
    select: function(event, ui) {
        if (ui.item) {
            // do something on successful select of an item
        }
    }
});

Oh, and the json response has to be in a specific format.

[{
    "id": 1234,
    "label": "Australia & South Pacific",
    "value": "Oceania and Australia",
    "extrastuff1": "hello",
    "extrastuff2": "jin"
}, {...}]

I think you get id, label, value. Just FYI, you can also send back extra information and access it in javascript like $("#log").html(ui.item.extrastuff1);