How to reload json from remote using jQuery UI?

Question

I have a search form that loads suggestions from a remote:

        $form.autocomplete({
            source: Routing.generate('hn_search_suggest'),
            minLength: 2
        });

When I enter a word, I get exactly and only one get request with the term parameter. Yet if delete and/or delte the input and restart typing a new one, I would like to reload the json repsonse.

Can I configure jqueryUi autocomplete to reload its suggestion list from the source?

Answer 1

You can make the autocomplete get its data from a controller using the Source property:

$("#myfield").autocomplete({
 source: function (request, response) {
     // request.term is the term searched for.
     // response is the callback function you must call to update the autocomplete's 
     // suggestion list.
     $.ajax({
         url: "/my_url/myservice.xyz",
         data: { q: request.term },
         dataType: "json",
         success: response,
         error: function () {
             response([]);
         }
     });
 });
});

This will callback to the server every time you type into it, reloading the source.