jQuery UI autocomplete with JSON from URL

You need to change your source to meet the following specifications (outlined in the documentation for the widget). The source must be an array containing (or return an array containing):

• Simple strings, or:
• objects containing a label property, a value property, or both.

If for some reason you cannot change what your remote source is returning, you can transform the data once it has successfully retrieved. Here's how you would do that:

$("#tags").autocomplete({    source: function (request, response) {        $.ajax({            url: "http://mysite.local/services/suggest.ashx",            data: { query: request.term },            success: function (data) {                var transformed = $.map(data, function (el) {                    return {                        label: el.phrase,                        id: el.id                    };                });                response(transformed);            },            error: function () {                response([]);            }        });    });});

As you can see, you'll need to make the AJAX call yourself by passing in a function to the source option of the widget.

The idea is to use $.map to transform your array into an array that contains elements that the autocomplete widget can parse.

Also notice that the data parameter passed to the AJAX call should end up as ?query=<term> when the user types a term.