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

2022-03-25 15:09:12 字數 1743 閱讀 1334

在現在的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...