Search on Click with Jquery's Autocomplete

Question

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 se

Answer 1

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.

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

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

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

Answer 4

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 5

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