Search on Click with Jquery's Autocomplete

Question

Hello, I am trying to simulate the Youtube Autocomplete Search experience.

I can't find the option when the viewer clicks on a listed item and is automatically proceeded to search for said item.

My coding is as follow:

<script type="text/javascript">
  var data = ['array1','array2'];
  $(document).ready(function() {
    $j("input#directorySearch").autocomplete(data);
  });
</script>

The above code will allow the user to click on of the listed items, however, it will fill the search box rather than automatically searching.

Answer 1

Can't you just do something like:

$('.autocomplete ul li').live("click", function() {
  $("form#search").submit();
});

Where the click event on your option list triggers a form submit for your search form??

Answer 2

Initially, I used something simple such as Bassistance.de

I moved on to using another library by devBridge

devBridge has a option called "onSelect:" which allow me to auto-submit the form.

Answer 3

Hi,

I wanted similar behaviour, using jQueryui's default autocomplete widget. The trick is to use the 'select' event, but submitting from your select-handler will not give the desired results, because the input will not yet have the selection filled in.

The following code works for me though:

$("input#searchbox").autocomplete({
  source: autocomplete,
  select: function(event, ui) {  }
    $("input#searchbox").val(ui.item.value);
    $("#searchform").submit();
  }
})

(in the example above, 'autocomplete' is a url that points to the completion source)

Where input#searchbox is the actual input entry, and #searchform is its parent form. Basically, you need to fill the input before submitting yourself.