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

Zhukov

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.

Messenger

How do i do this in asp.net please? – Overliberal

Answer 2

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

Carmel

Just came back trying this solution but apparently, the form will not submit. It appears that there is another listener, for when the item is click it will then fill in the input form first. – Zhukov

Answer 3

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.

Zhukov

Answer 4

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

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

Milkwhite

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

Externalize