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

在現在的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實現搜尋關鍵字自動匹配提示方法

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

關鍵字搜尋

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

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

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

關鍵字搜尋

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

相關推薦

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