在現在的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下的使用者可能會出現錯誤。$(根據文字表單中的輸入資訊,進行關鍵字提示匹配。 jquery autocomplete 外掛程式支援 on/off功能,從而控制效果的開關。'#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})
;
var ac = $(3,設定表現樣式'#query'
).autocomplete()
; ac.disable()
; ac.enable()
; ac.setoptons()
;
最後,用div和css美化表現效果。
liberialibyan arab jamahiriya
liechtenstein
lithuania
.autocomplete-w1jquery autocomplete 外掛程式官方鏈結.autocomplete
.autocomplete
.selected
.autocomplete div
.autocomplete strong
外掛程式介紹: 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...