jQuery實現搜尋關鍵字自動匹配提示方法

2021-09-05 23:37:13 字數 1834 閱讀 1891

在現在的web設計中，提高使用者體驗是企業最為注重的內容之一。在搜尋表單中，根據輸入的部分內容進行關鍵字匹配提示功能，就是最直觀和常用的互動體驗，類似功能已經被多數的網際網路**應用。例如google的搜尋框效果如下：

這裡介紹乙個jquery實現搜尋關鍵字自動匹配提示方法。jquery autocomplete

是乙個基於jquery實現搜尋關鍵字自動匹配提示的外掛程式，該外掛程式可擴充套件性強，表現效能優越，方便整合到自己的專案中使用；相容ie 6.0+, ff 2+, safari 2.0+, opera 9.0+, and chrome 1.0+ 等主流瀏覽器。

演示效果：

下面是具體的使用方法：

1，使用設定

首頁，要把外掛程式的js**嵌入到你自己的專案中去。

2，使用方法

為要實現自動匹配提示的 input 表單新增 autocomplete 功能。

初始化 autocomplete 物件，確保正確載入 dom 物件，否則ie下的使用者可能會出現錯誤。

$(


'#query'


).autocomplete(,


// additional parameters


onselect:


function


(data, value)


,// callback function, triggered if one of the suggested options is selected,


lookup:


['january'


,'february'


,'march'


]// list of suggestions for local autocomplete})


;
根據文字表單中的輸入資訊，進行關鍵字提示匹配。

jquery autocomplete 外掛程式支援 on/off功能，從而控制效果的開關。

var ac = $(


'#query'


).autocomplete()


; ac.disable()


; ac.enable()


; ac.setoptons()


;
3，設定表現樣式

最後，用div和css美化表現效果。

liberia


libyan arab jamahiriya


liechtenstein


lithuania



.autocomplete-w1


.autocomplete


.autocomplete


.selected


.autocomplete div 


.autocomplete strong
jquery autocomplete 外掛程式官方鏈結

外掛程式介紹: www.devbridge.com/projects/autocomplete/jquery/

這裡還有一種基於mootools框架的關鍵字自動匹配提示方法：

jQuery實現搜尋關鍵字自動匹配提示方法

在現在的web設計中，提高使用者體驗是企業最為注重的內容之一。在搜尋表單中，根據輸入的部分內容進行關鍵字匹配提示功能，就是最直觀和常用的互動體驗，類似功能已經被多數的網際網路 應用。例如google的搜尋框效果如下 這裡介紹乙個jquery實現搜尋關鍵字自動匹配提示方法。jquery autocom...

關鍵字搜尋

關鍵字搜尋 function sercah waitmsg 已找到對應的 g keys count 處關鍵字！1 相同關鍵字查詢時返回 reading children reading box m p css span keys removeattr style removeattr id g ke...

elementUI實現關鍵字搜尋 只是搜尋

有過迷茫的階段獨自走在回家的街上，當我發現路還離我很遠現在依然是像當初那麼渴望 elementui實現關鍵字搜尋 運用的elementui選擇器中的遠端搜尋功能 還沒有封裝，接下來會封裝，封裝一點點學，不著急 結構 data 登記門店 prop name class el btn from sele...