【IT168 資訊】實時搜索是一種增強的搜索表單，它使用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：
<div>
<input type="text" placeholder="Search GitHub...">
<div></div>
</div>
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：
<input type="text" name="country" id="autocomplete"/>
JavaScript(AJAX查找)：
JavaScript(本地查找)：
5. EasyAutocomplete
EasyAutocomplete是一個高度可定製的jQuery自動完成插件，具有所有常用的功能。 它支持JSON，XML和純文本格式的本地和遠程數據集。它還支持回調處理程序以及一些默認樣式。
將這個插件分開的是它們的模板功能，模板用於定義結果視圖。程式設計師可以創建自定義模板或使用其中一種可用的內置預設，其中包括：
1、描述模板
2、Icon 右/左模板
3、連結模板
使用此插件實現基本的自動完成非常簡單，請參閱以下示例代碼：
HTML：
<input id="countries"/>
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個活動安裝。它與大多數主題兼容，具有多種可配置選項，並且易於集成，最小化。
總結
希望這份清單可以幫助程式設計師為項目選擇合適的實時搜索解決方案。根據您的經驗和項目環境，選擇比其他環境更容易實現和定製的方案。
沒有列出的其他有能力的解決方案，也許你可以在下面的評論中列出來。