AutoComplete jQuery Using JSON data

Question

Imagine a json file with the following data:

[
    {
        color: \"red\",
        value: \"#f00\"
    },
    {
        color: \"green\",
        value: \"         


        

Answer 1

Using a remote data source:

$("#selector").autocomplete({
    source: function (request, response) {
         $.ajax({
             url: "my_server_side_resource.php",
             type: "GET",
             data: request,
             success: function (data) {
                 response($.map(data, function (el) {
                     return {
                         label: el.color,
                         value: el.value
                     };
                 }));
             }
         });
    },
    select: function (event, ui) {
        // Prevent value from being put in the input:
        this.value = ui.item.label;
        // Set the next input's value to the "value" of the item.
        $(this).next("input").val(ui.item.value);
        event.preventDefault();
    }
});

Tweak the $.ajax call as needed. This example will generate requests to your PHP resource that look like this:

my_server_side_resource.php?term=xyz

If you have control over your server-side code, you could change the data that's returned to look like this:

[
    {
        label: "red",
        value: "#f00"
    }, /* etc */
]

You can simply use a string, the name of your server-side resource as the source:

$("#selector").autocomplete({
     source: "my_server_side_resource.php",
     select: /* same as above */
});

Check out the remote with JSONP example for a full example using a server-side resource.

Edit: See this example for a working demo using local data: http://jsfiddle.net/SMxY6/