Поиск по клику с автозаполнением Jquery

Question

Я пытаюсь имитировать опыт поиска автозаполнения Youtube.

Я не могу найти этот параметр, когда зритель нажимает на указанный элемент и автоматически переходит к поиску указанного элемента.

Моя кодирование следующим образом:

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

Приведенный выше код позволит пользователю нажать на из перечисленных пунктов, однако, он будет заполнить форму поиска, а не автоматический поиск.

Answer 1

Я хотел подобное поведение, используя виджет автозаполнения jQueryui по умолчанию. Фокус в том, чтобы использовать событие «select», но отправка из вашего обработчика выбора не даст желаемых результатов, потому что вход еще не заполнен.

Следующий код работает для меня:

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

(в приведенном выше примере, «автозаполнения» является URL, который указывает на источник завершения)

Где вход # SearchBox является фактическим начального ввода и #searchform является его родительской формы. В принципе, вам нужно заполнить ввод перед подачей себя.

Answer 2

Разве вы не можете просто сделать что-то вроде:

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

Где событие щелчка в списке опций вызывает отправки формы для поиска форме ??

Answer 3

Первоначально я использовал что-то простое, такие как Bassistance.de

я переехал на другую, используя библиотеку devBridge

devBridge имеет опцию под названием «onSelect:», который позволит мне для автоматического отправки формы.

Answer 4

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

Официальная документация: http://docs.jquery.com/Plugins/Autocomplete/result#handler

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(); } 
    }) 
}); 

Я использую это работает отлично :)