Как использовать кнопку поиска с автозаполнением JQuery UI? - PullRequest
Новая
       20

Как использовать кнопку поиска с автозаполнением JQuery UI?

1 голос
/ 03 мая 2019

Я разрабатываю веб-сайт, где использую панель поиска с помощью плагина автозаполнения jquery ui.

Но теперь это работает только с клавиатурой Enter и щелчком мыши после выбора из выпадающего списка.Я также поставил кнопку поиска, но раскрывающийся список закрывается при нажатии на кнопку, и перенаправление или что-то не происходит.

Jquery: 

$(function() {
    $( "#searchbox" ).autocomplete({
        source: url + 'Home/searchallresults_shop',
        autoFocus:true,
        select: function( event, ui ) {
            $( "#searchallresults_shop" ).val( ui.item.name );
            console.log(ui);
            window.location.href = ui.item.url;
        }
    });
});

HTML: 

<input type="text"  name="searchbox" id="searchbox">
<button type="submit" id="searchbutton_jq">Search</button>

Как сделать так, чтобы кнопка поиска выбирала первый элемент автозаполнения и перенаправляла?

Спасибо.

1 Ответ

0 голосов
/ 16 мая 2019

Непонятно, что именно вы говорите. Я думаю, что вы имеете в виду, что, когда элемент результата имеет фокус, вы хотите, чтобы он заполнил поле, чтобы пользователь мог затем нажать кнопку «Поиск» вместо нажатия Enter или нажатия на результат. Я просто не уверен, как часто это входит в игру.

Рассмотрим следующий код: 

var myData = [{
    value: "jquery",
    label: "jQuery",
    url: "https://jquery.com/"
  },
  {
    value: "jquery-ui",
    label: "jQuery UI",
    url: "https://jqueryui.com/"
  },
  {
    value: "sizzlejs",
    label: "Sizzle JS",
    url: "https://sizzlejs.com/"
  }
];
$(function() {
  function redirect(u) {
    window.location.href = u;
  }
  $("#searchbox").autocomplete({
    source: myData,
    autoFocus: true,
    select: function(e, ui) {
      $("#searchallresults_shop").val(ui.item.label);
      $("#searchbutton_jq").data("url", ui.item.url);
      return false;
    },
    focus: function(e, ui) {
      $("#searchallresults_shop").val(ui.item.label);
      $("#searchbutton_jq").data("url", ui.item.url);
      return false;
    }
  });
  $("#searchbutton_jq").click(function() {
    if ($(this).data("url") != undefined) {
      redirect($(this).data("url"));
    }
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" name="searchbox" id="searchbox" />
<button type="submit" id="searchbutton_jq"> Search
  </button>
<br /> Shop: <input type="text" id="searchallresults_shop" />

Если один из элементов имеет focus, мы можем использовать обратный вызов для выполнения некоторых действий. Если фокусировка поддерживается и пользователь нажимает кнопку «Поиск», происходит ожидаемое перенаправление. То же самое, если они выбирают предмет. Помните, что blur может также вызвать select. Нажатие на кнопку вызовет событие blur, поэтому неясно, что на самом деле пузырится наверху, поскольку они оба делают одно и то же.

...