14 плагинов jQuery Live Search

Из заголовка видно, что это не плагин jQuery, но, тем не менее, это JavaScript. React Autosuggest — это библиотека с открытым исходным кодом с огромным количеством параметров конфигурации. Он удобен для мобильных устройств, совместим с WAI-ARIA, полностью настраивается и хорошо интегрируется с Redux и Flux.

Для настройки требуется немного усилий, но как только вы это сделаете, вы получите плагин поиска в реальном времени , который будет вести себя именно так, как вы этого хотите. Вот частичный пример кода компонента:

   return (
    <Autosuggest
      suggestions={suggestions}
      onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
      onSuggestionsClearRequested={this.onSuggestionsClearRequested}
      getSuggestionValue={getSuggestionValue}
      renderSuggestion={renderSuggestion}
      inputProps={inputProps}
    />
  );

Хотя исходная документация иллюстрирует решение, использующее локальный массив для источника данных, вы можете легко заменить его с помощью вызова удаленной выборки внутри функции onSuggestionsFetchRequested()

Чтобы узнать больше, перейдите по следующим ссылкам:

• Интернет сайт
• Источник

13. W3Schools Ajax Live Поиск

Если вы хотите избежать зависимостей и реализовать решение на чистом JavaScript, то вам следует попробовать это решение, предоставленное w3schools.com .

Серверная часть, используемая в этом примере, использует сервер PHP. Очевидно, вы можете заменить это серверной технологией по вашему выбору. Код требует данных в формате XML. Вы также можете рефакторинг кода для принятия форматов JSON.

Отличительной особенностью этого решения является то, что оно работает со всеми современными браузерами и более старыми, вплоть до IE5!

HTML:

 <form>
  <input type="text" size="30" onkeyup="showResult(this.value)">
  <div id="livesearch"></div>
</form>

JavaScript:

 function showResult(str) {
  if (str.length==0) {
    document.getElementById("livesearch").innerHTML="";
    document.getElementById("livesearch").style.border="0px";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {  // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("livesearch").innerHTML=this.responseText;
      document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    }
  }
  xmlhttp.open("GET","livesearch.php?q="+str,true);
  xmlhttp.send();
}

Чтобы узнать больше, перейдите по следующей ссылке:

• Источник + Демо

14. WordPress Live Search

Если вы используете WordPress, вам будет приятно узнать, что вы можете реализовать живой поиск с минимальным или вообще без кодирования. Все, что вам нужно, это установить и настроить плагин WordPress с функцией поиска в реальном времени . Самым популярным из них является WordPress Live Search от Dave, в настоящее время более 10 000 активных установок. Он совместим с большинством тем, имеет несколько настраиваемых параметров и легко интегрируется с минимальными усилиями. Он также поставляется с учебником YouTube, который демонстрирует весь процесс настройки.

Чтобы узнать больше, перейдите по следующим ссылкам:

• Скачать
• Документация

Резюме

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

Есть еще другие бесчисленные решения, которые я не перечислил. Возможно, вы можете помочь, перечислив их в комментариях ниже.