Tutorial :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 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.


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 :)

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »