Question

I have this:

$("#term").autocomplete({
  minLength: 2,
  source: function( request, response ) {
    $.ajax({
      url: 'http://query.yahooapis.com/v1/public/yql',
      dataType: 'JSONP',
      data: {
        format: 'json',
        q: 'select * from xml where url="http://google.com/complete/search?output=toolbar&q=' + escape(request.term) + '"'
      },
      success: function(data) {
        response($.map(data.query.results.toplevel.CompleteSuggestion, function(item) {
          return { label: item.suggestion.data, value: item.suggestion.data };
        }));
      }
    });
  }
});

So the autocomplete has a build in for keyup event. But how do I give the same ‘function( request, response )’ when clicking something (= ul li in this case)? How do I attach onclick event to do the autocomplete?

here is live version: JsBin

Answer 1

Your question is not very clear. As far as I understood, the plugin provides a “search” method to programmatically initiate a search, like you would if you were typing in the input field directly.

The use is the following:

$('#term').autocomplete('search', 'Napoleon');

If you want to start a new suggestion each time an element is selected in the menu, you can use the select event. It is trigerred when an element is selected from the suggestion list, either by cliking an item, or with keyboard:

$("#term").autocomplete({
    ...,
    select: function(e, ui) {
        $('#term').val(ui.item.value).autocomplete('search', ui.item.value);
    }
});

The property ui.item is the data item that was selected.

I’ve set-up a demo where cliking a button will search for the term associate to a “data-” attribute:

DEMO

Further reading:

• “search” method of autocomplete