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.

Janettejaneva

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.

Andriette

Thanks for your answer. I think I can edit the returned JSON to the label and value instead of id and phrase. But if i change the returned JSON, have I used the right source in my example, or do I have to send the typed in text to the service in some way. I mean the service takes a param called "query", so in some way I guess it needs to have that param send to it as well. Or am i totally off here? – Janettejaneva

So if you change your web service to return the right thing but take an argument called query, your code will look similar to the above except you'll just call response(data) in the success handler. In other words, since you are changing the default AJAX request that takes place, you'll still have to do it yourself. – Andriette

Great, I'll try that out when I get back to my development computer. And by writing data: { query: request.term }, the webservice will be called with the right input as the query parameter right? – Janettejaneva

Yep! request.term is the term that the user searched for. – Andriette