jQuery UI autocomplete with JSON from URL

Question

I'm using the jQuery UI Autocomplete function. I can make it work with the example provided with jQuery UI like this:

var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];

$("#tags").autocomplete({
    source: availableTags
});

This works without any problems. But I need to use JSON as my data source who can be retrieved like this: http://mysite.local/services/suggest.ashx?query=ball

If I'm going to that URL I get JSON back like this:

 [{"id":12,"phrase":"Ball"},{"id":16,"phrase":"Football"},{"id":17,"phrase":"Softball"}]

How can I use my URL as the data source?

I've tried changing the source-option like this:

$("#tags").autocomplete({
    source: "http://mysite.local/services/suggest.ashx"
});

But it doesn't help. I guess that the service doesn't know which keyword has been typed in the input field or so?

Any pointers would be great.

Answer 1

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.