Question

I am having trouble trying to figure out how to use JQuery Autocomplete in the following situation.

I am trying to hook it up to a Web Service that returns a JSON object. The URL form is the following:

host/api/schools/{search-term}

No query-string ?term= or anything else.

How can I set up Autocomplete to do this? I’m pretty new at JavaScript, but I can get by.

I’ve tried the following bit:

$(...).autocomplete({
    source: function(term, callback) {
        $.getJSON("url", { foo: term }, callback);
    }
});

but can’t quite get it to pass host/api/schools/{search-term} to the server (it comes out as host/api/schools/?foo%5Bterm=%5D{search-term} when checked using fiddler where {search-term} is the text entered.

Help?

Answer 1

Adding this here as it basically answers the question, from the jquery-ui documentation:

The third variation, the callback, provides the most flexibility, and can be used to connect any data source to Autocomplete. The callback gets two arguments:

A request object, with a single property called “term”, which refers
to the value currently in the text input. For example, when the user
entered “new yo” in a city field, the Autocomplete term will equal
“new yo”

A response callback, which expects a single argument to contain the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data (String-Array or Object-Array with label/value/both properties). It’s important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.