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

Я пытаюсь смоделировать Youtube Autocomplete Search.

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

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

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

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

Ответы

Ответ 1

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

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

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

(в приведенном выше примере "автозаполнение" - это URL-адрес, указывающий на источник завершения)

Если input # searchbox является фактической входной записью, а #searchform является ее родительской формой. В принципе, вам нужно заполнить ввод, прежде чем отправлять себя.

Ответ 2

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

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

Если событие click в вашем списке параметров вызывает отправку формы для вашей формы поиска?

Ответ 3

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

Я перешел к использованию другой библиотеки devBridge

devBridge имеет опцию "onSelect:", которая позволяет мне автоматически отправлять форму.

Ответ 4

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

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

Ответ 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(); }
    })
});

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