14 個 jQuery 實時搜索插件

實時搜索 是一種增強的搜索表單，它使用 AJAX 技術在同一視圖中提供結果或建議。這與從現代瀏覽器（如 Chrome、Firefox 或 Safari）獲得自動完成功能的常規 HTML 輸入字段不同。 實時搜索 通常是一個輸入字段，已被編程為從特定數據集中加載建議。

2017 年 7 月 6 日 :這篇文章被重寫以更新插件列表，並包括一些額外的非 jQuery 庫。

使用實時搜索 在您的應用程序中大大提高了您網站的用戶友好性。無論您使用什麼後端技術——PHP、Java、Python、Ruby——JavaScript 都是實現客戶端實時搜索的最佳選擇 功能。

在繼續之前，我想指出術語實時搜索 有點模棱兩可。該術語沒有權威定義。其他經常用於表示同一事物的術語是自動完成 然後提前輸入 .

我遇到了許多標記為實時搜索的解決方案 缺乏某些關鍵特徵。對於本文，我將僅列出 實時搜索 符合我上面定義的定義的解決方案。

1. Ajax 實時搜索

此列表中的第一個是非常了不起的開源實時搜索 jQuery插件。它有很好的文檔記錄，並且可以在 Chrome、Firefox、Safari、Opera 和 IE8 中完美運行。最令人印象深刻的特點是它可以以分頁表的形式返回結果！ 這有多酷？

您可以通過以下鏈接了解更多信息：

• 網站
• 來源
• 下載

2.語義 UI 搜索組件

如果你喜歡 CSS 框架，你應該看看 Semantic UI。他們有一個很酷的搜索組件，可讓您實現實時搜索 在您的表格上很容易。看看這個示例代碼：

HTML：

<div class="ui search">
  <input class="prompt" type="text" placeholder="Search GitHub...">
  <div class="results"></div>
</div>

JavaScript：

$('.ui.search')
  .search({
    apiSettings: {
      url: '//api.github.com/search/repositories?q={query}'
    },
    fields: {
      results : 'items',
      title   : 'name',
      url     : 'html_url'
    },
    minCharacters : 3
  })
;

它非常小巧但功能強大。如果您使用 API 設置選項，您可以進行自定義，例如將結果分組到類別中！。

語義 UI 也有不同的風格，專門為 React、Meteor、Ember 和 Angular 構建。查看他們的集成頁面以獲取完整列表。

要了解更多信息，請訪問以下鏈接。

• 下載
• 文檔
• 演示

3. jQueryUI 自動完成

這是一個 jQuery 小部件，它是 jQuery UI 庫的一部分。該庫本身是一組基於 jQuery 構建的精選用戶界面組件、效果和主題。

自動完成帶有幾個模板來提供不同的實現。這是一個這樣的例子：

HTML：

<div class="ui-widget">
  <label for="birds">Birds: </label>
  <input id="birds">
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

JavaScript：

$( function() {
  function log( message ) {
    $( "<div>" ).text( message ).prependTo( "#log" );
    $( "#log" ).scrollTop( 0 );
  }

  $( "#birds" ).autocomplete({
    source: "search.php",
    minLength: 2,
    select: function( event, ui ) {
      log( "Selected: " + ui.item.value + " aka " + ui.item.id );
    }
  });
} );

要了解更多信息，請訪問以下鏈接：

• 來源
• 演示

4. DevBridge jQuery 自動完成

DevBridge jQuery AutoComplete 是一個小型 JavaScript 庫，可讓您將常規文本輸入字段轉換為自動完成建議框。它的 API 龐大且有據可查，允許您執行相當多的不同配置。實現起來很簡單，看看這個例子：

HTML：

<input type="text" name="country" id="autocomplete"/>

JavaScript（AJAX 查找）：

// AJAX Lookup
$('#autocomplete').autocomplete({
    serviceUrl: '/autocomplete/countries',
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});

JavaScript（本地查找）：

var countries = [
   { value: 'Andorra', data: 'AD' },
   // ...
   { value: 'Zimbabwe', data: 'ZZ' }
];

$('#autocomplete').autocomplete({
    lookup: countries,
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});

要了解更多信息，請訪問以下鏈接：

• 網站

5.輕鬆自動完成

EasyAutocomplete 是一個高度可定制的 jQuery 自動完成插件，具有所有常用功能。它支持 JSON、XML 和純文本格式的本地和遠程數據集。它還支持回調處理程序以及一些默認樣式。

這個插件與眾不同的是他們的模板功能。模板用於定義結果視圖。您可以創建自定義模板或使用可用的內置預設之一，其中包括：

• 描述模板
• 圖標右/左模板
• 鏈接模板

用這個插件實現一個基本的自動完成非常簡單，看下面的示例代碼：

HTML：

<input id="countries"/>

JavaScript：

var options = {

  url: "resources/countries.json",

  getValue: "name",

  list: {
    match: {
      enabled: true
    }
  },

  theme: "square"
};

$("#countries").easyAutocomplete(options);

JSON：

[
  {"name": "Afghanistan", "code": "AF"},
  {"name": "Aland Islands", "code": "AX"},
  {"name": "Albania", "code": "AL"},
  {"name": "Algeria", "code": "DZ"},
  {"name": "American Samoa", "code": "AS"}
 ]

要了解更多信息，請訪問以下鏈接：

• 網站
• 下載
• 來源

6. PixaBay jQuery-autoComplete

Pixabay.com 是一個免費的股票網站，有一個很棒的開源自動完成 jQuery 插件，您可以將其用於您的項目。最初他們使用的是 DevBridge 的 jQuery Autocomplete（列表中的第 4 位）。後來他們創建了一個分支並開始更新它以滿足他們自己的需求。最終，他們對原始源代碼進行了大量修改，最終獲得了自己的超輕量級優化插件。

該插件壓縮後只有 1.4 kB，支持多個數據源、回調和智能緩存系統。這是插件的一個示例實現：

JavaScript：

$('input[name="q"]').autoComplete({
  source: function(term, response){
    $.getJSON('/some/ajax/url/', { q: term }, function(data){ response(data); });
  }
});

要了解更多信息，請訪問以下鏈接：

• 來源
• 下載

7.馬可波羅

這是一個 jQuery 自動完成插件，由於當時缺乏可靠的自動完成插件而開發。它具有質量文檔、緩存、內存選擇、自定義樣式、回調處理和 WAI-ARIA 支持。它需要 jQuery v1.4.3 或更高版本，並支持所有現代瀏覽器（甚至 IE6！）。

實現馬可波羅非常簡單。這是一個示例實現：

HTML：

...
<head>
  <script src="jquery.min.js"></script>
  <script src="jquery.marcopolo.min.js"></script>
</head>
...
<body>
  <input type="text" name="userSearch" id="userSearch">
</body>

JavaScript：

$('#userSearch').marcoPolo({
  url: '/users/search',
  formatItem: function (data, $item) {
    return data.first_name + ' ' + data.last_name;
  },
  onSelect: function (data, $item) {
    window.location = data.profile_url;
  }
});

JSON（源數據）：

[
  {
    "first_name": "James",
    "last_name": "Butler",
    "profile_url": "/users/78749",
  },
  {
    "first_name": "Win",
    "last_name": "Butler",
    "profile_url": "/users/41480",
  },
]

要了解更多信息，請訪問以下鏈接：

• 來源
• 演示

8. xDSoft 像 Google 一樣自動完成

這是一個輕量級的自動完成 jQuery 插件，支持本地和遠程數據源。它具有重音折疊功能。

這是一個示例代碼實現：

JavaScript

$('#remote_input2').autocomplete({source:[
 {
  url:"/component/jquery_plugins/?task=demodata&q=%QUERY%",
  type:'remote'
 },
 ["One","Two","Three"]
]});

要了解更多信息，請訪問以下鏈接：

• 網站
• 下載
• 來源

9. jQuery Typeahead 搜索

jQuery Typeahead Search 是一個使用深度自定義選項構建的自動完成插件。它適用於 IE8+ 的所有現代瀏覽器，並支持多種內部和外部 AJAX 回調。

如果您查看 demo 頁面中，您會發現大量不同代碼實現的示例。

• 網站
• 演示
• 下載

10. Algolia 自動完成

這個 JavaScript 庫能夠向搜索框添加快速且功能齊全的自動完成菜單。它可以與 Algolia 的搜索引擎結合使用。

它支持來自 IE9 的所有現代瀏覽器，可作為 jQuery 插件、Angular 指令和獨立庫使用。除了通常的功能外，它還具有安全功能，例如防止 XSS 攻擊。

• 來源
• 下載

11. ng-bootstrap 預輸入

如果您在項目中同時使用 Angular 和 Bootstrap，則應該使用 ng-bootstrap 框架。它有一個 Typeahead 就像一個普通的 jQuery 自動完成插件一樣工作的組件。

它支持模板、本地和遠程數據集，以及通常的 livesearch 特徵。這是 Wikipedia 搜索的部分代碼實現：

HTML：

<div class="form-group" [class.has-danger]="searchFailed">
  <label for="typeahead-http">Search for a wiki page:</label>
  <input id="typeahead-http" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" placeholder="Wikipedia search" />
  <span *ngIf="searching">searching...</span>
  <div class="form-control-feedback" *ngIf="searchFailed">Sorry, suggestions could not be loaded.</div>
</div>

打字稿：

@Injectable()
export class WikipediaService {
  constructor(private _jsonp: Jsonp) {}

  search(term: string) {
    if (term === '') {
      return Observable.of([]);
    }

    let wikiUrl = 'https://en.wikipedia.org/w/api.php';
    let params = new URLSearchParams();
    params.set('search', term);
    params.set('action', 'opensearch');
    params.set('format', 'json');
    params.set('callback', 'JSONP_CALLBACK');

    return this._jsonp
      .get(wikiUrl, {search: params})
      .map(response => <string[]> response.json()[1]);
  }
}

@Component({
  selector: 'ngbd-typeahead-http',
  templateUrl: './typeahead-http.html',
  providers: [WikipediaService],
  styles: [`.form-control { width: 300px; display: inline; }`]
})
export class NgbdTypeaheadHttp {
  model: any;
  searching = false;
  searchFailed = false;

  constructor(private _service: WikipediaService) {}

  search = (text$: Observable<string>) =>
    text$
      .debounceTime(300)
      .distinctUntilChanged()
      .do(() => this.searching = true)
      .switchMap(term =>
        this._service.search(term)
            .do(() => this.searchFailed = false)
            .catch(() => {
              this.searchFailed = true;
              return Observable.of([]);
            }))
      .do(() => this.searching = false);
}

要了解更多信息，請訪問以下鏈接：

• 文檔
• 下載

12.反應自動建議

你可以從標題看出這不是一個 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() 中的遠程 fetch 調用交換 功能。

要了解更多信息，請訪問以下鏈接：

• 網站
• 來源

13. W3Schools Ajax 實時搜索

如果您希望避免依賴並使用純 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 實時搜索

如果您使用 WordPress，您會很高興知道您可以實現 實時搜索 幾乎沒有編碼。您只需要安裝和設置一個帶有 live search 的 WordPress 插件 功能。最受歡迎的是 Dave 的 WordPress 實時搜索 目前有超過 10,000 次活動安裝。它與大多數主題兼容，帶有多個可配置選項，並且易於集成且無需大驚小怪。它還附帶一個 YouTube 教程，演示了整個設置過程。

要了解更多信息，請訪問以下鏈接：

• 下載
• 文檔

總結

我希望這個列表可以幫助您選擇合適的實時搜索 您的項目的解決方案。根據您的經驗和項目環境，有些比其他的更容易實施和定制。

我還沒有列出其他無數有能力的解決方案。也許您可以通過在下面的評論中列出它們來提供幫助。