程序員收：14個jQuery 實時搜索插件，很難不愛！

實時搜索是一種增強的搜索表單，它使用AJAX技術在同一視圖中提供結果或建議。這是一個常規的HTML輸入欄位，它通過Chrome、Firefox或Safari等現代瀏覽器自動完成搜索功能。

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

實時搜索一詞有點含糊不清，該術語沒有權威的定義。我遇到過一些標籤為實時搜索的解決方案，但缺乏某些關鍵功能。

1、Ajax實時搜索

這是一個開源的實時搜索jQuery插件，具有良好的記錄，在Chrome、Firefox、Safari、Opera和IE8中均可完美呈現。 最令人印象深刻的功能是它可以以複製表的形式返回結果！

程序員可在官網或Github上了解更多信息（Github地址為：https://github.com/iranianpep/ajax-live-search）

2、Semantic UI搜索組件

如果程序員使用CSS框架，可以考慮Semantic UI。它有一個很酷的搜索組件，使程序員可以很容易地在表單上實現實時搜索。以下是示例代碼：

HTML：

JavaScript：

小但很強大，如果使用API設置選項，可以執行自定義，例如將結果分組。同時，Semantic UI還專為React，Meteor，Ember和Angular設計了不同的風格。

要了解更多信息，可以查看相關Demo或者查看官網（https://semantic-ui.com/modules/search.html）。

3、jQueryUI AutoComplete

這是一個jQuery小部件，它是jQuery UI庫的一部分。庫本身是一組精心設計的用戶界面組件，主題是建立在jQuery之上。

自動填充帶有幾個模板，可以提供不同的實現。以下是簡單示例：

HTML：

JavaScript：

4、DevBridge jQuery AutoComplete

DevBridge jQuery AutoComplete是一個小型JavaScript庫，可讓將常規文本輸入欄位轉換為自動填充建議框。它的API功能豐富、文檔良好，可以執行相當多的不同配置。

實現它很簡單，看看這個例子：

HTML：

JavaScript（AJAX查找）：

JavaScript（本地查找）：

5. EasyAutocomplete

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

將這個插件分開的是它們的模板功能，模板用於定義結果視圖。程序員可以創建自定義模板或使用其中一種可用的內置預設，其中包括：

• 描述模板

• Icon 右/左模板

• 鏈接模板

使用此插件實現基本的自動完成非常簡單，請參閱以下示例代碼：

HTML：

JSON：

Javascript：

6、PixaBay jQuery-autoComplete

這是一個開源的自動完成jQuery插件，您可以用於您的項目。最初該項目團隊使用DevBridge的jQuery自動填充功能。後來他們創建了一個fork，並開始更新它以滿足自己的需求。最終，他們對原始的源代碼進行了多次迭代優化，開源了這款超輕量級優化插件。

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

JavaScript：

程序員要了解更多信息，可以去官網或Github上查看（github鏈接：https://github.com/Pixabay/jQuery-autoComplete）

7、Marco Polo

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

實現Marco Polo很簡單。這是一個示例實現：

HTML：

JSON（源數據）：

Javascript：

程序員要了解更多信息，可以去官網或Github上查看（github鏈接：https://github.com/jstayton/jquery-marcopolo）

8、xDSoft Autocomplete Like Google

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

以下是一個示例代碼：

JavaScript：

程序員要了解更多信息，可以去官網或Github上查看，自行百度即可。

9、 jQuery Typeahead Search

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

如果查看演示頁面，你會發現許多不同代碼實現的示例。

10、Algolia Autocomplete

該JavaScript庫能夠在搜索框中添加快速且功能齊全的自動填充菜單，它可以與Algolia搜索引擎結合使用。

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

11、ng-bootstrap Typeahead

如果在項目中使用Angular和Bootstrap，則應使用ng-bootstrap框架。它具有一個類似於常規jQuery自動完成插件的aTypeahead組件。

它支持模板，本地和遠程數據集，以及通常的搜索功能。以下是維基百科搜索的部分代碼實現：

HTML：

Typescript：

12、React Autosuggest

你可以從標題中知道這不是一個jQuery插件，但是它仍然是JavaScript。React Autosuggest是一個具有大量配置選項的開源庫。它符合移動設備，符合WAI-ARIA，完全可定製，並且與Redux和Flux完美結合。

經過恰當的配置，程序員會得到一個真正的搜索插件，這是組件的部分代碼示例：

儘管源文檔說明了使用本地陣列進行數據源的解決方案，但可以通過onSuggestionsFetchRequested（）函數中的遠程提取調用輕鬆地交換。

程序員要了解更多信息，可以去官網或Github上查看（github鏈接：https://github.com/moroshko/react-autosuggest）

13、W3Schools Ajax Live Search

如果希望避免依賴並使用純JavaScript實現解決方案，那麼應該嘗試使用w3schools提供的解決方案。

本示例中的後端使用PHP伺服器。顯然，程序員可以用喜歡的伺服器技術來代替。該代碼需要XML格式的數據，可以重寫代碼以接受JSON格式。

這個解決方案的偉大之處在於，它適用於所有現代瀏覽器和較早的IE5！

HTML：

Javascript：

14、WordPress Live Search

如果使用WordPress，程序員可以使用最少的編碼來實現實時搜索。只需要安裝和設置具有實時搜索功能的WordPress插件。最受歡迎的是Dave的WordPress Live Search，目前有超過10,000個活動安裝。它與大多數主題兼容，具有多種可配置選項，並且易於集成，最小化。

總結

希望這份清單可以幫助程序員為項目選擇合適的實時搜索解決方案。根據您的經驗和項目環境，選擇比其他環境更容易實現和定製的方案。

沒有列出的其他有能力的解決方案，也許你可以在下面的評論中列出來。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！