Search on Click with Jquery's Autocomplete

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 auto开发者_如何学Gomatically 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.

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.

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??

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.

$j("input#directorySearch").result(function(event, data, formatted) {
  $(this).closest("form").submit();
});

Official documentation: http://docs.jquery.com/Plugins/Autocomplete/result#handler

$(function() {
$( "#search" ).autocomplete(
    {
         source:'/search-terms.php',
         focus: function(event, ui) {
             $("input#search").val(ui.item.label);
         },
         select: function(event, ui) {

            $("#searchform button").click(); }
    })
});

I am using this working fine :)