jQuery 搜索關(guān)鍵字自動(dòng)匹配提示插件
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
[p][align=center]在現(xiàn)在的web設(shè)計(jì)中，提高用戶(hù)體驗(yàn)是企業(yè)最為注重的內(nèi)容之一。在搜索表單中，根據(jù)輸入的部分內(nèi)容進(jìn)行關(guān)鍵字匹配提示功能，就是最直觀和常用的交互體驗(yàn)，類(lèi)似功能已經(jīng)被多數(shù)的互聯(lián)網(wǎng)網(wǎng)站應(yīng)用。例如google的搜索框效果如下：[img]http://bbon.cn/wp-content/uploads/2009/11/image_thumb8.png[/img][/align][/p]
這里介紹一個(gè)jquery實(shí)現(xiàn)搜索關(guān)鍵字自動(dòng)匹配提示方法。jquery autocomplete 是一個(gè)基于jquery實(shí)現(xiàn)搜索關(guān)鍵字自動(dòng)匹配提示的插件，該插件可擴(kuò)展性強(qiáng)，表現(xiàn)性能優(yōu)越，方便整合到自己的項(xiàng)目中使用；兼容ie 6.0+, ff 2+, safari 2.0+, opera 9.0+, and chrome 1.0+ 等主流瀏覽器。
[b]演示效果[/b]：http://devbridge.com/projects/autocomplete/jquery/#demo
[p]下面是具體的使用方法：[/p]
1，使用設(shè)置
[p]首頁(yè)，要把插件的js代碼嵌入到你自己的項(xiàng)目中去。[/p]
2，使用方法
[p]為要實(shí)現(xiàn)自動(dòng)匹配提示的 input 表單添加 autocomplete 功能。[/p]
[p]初始化 autocomplete 對(duì)象，確保正確加載 dom 對(duì)象，否則ie下的用戶(hù)可能會(huì)出現(xiàn)錯(cuò)誤。[/p]
$[color=#009900]([/color][color=#3366cc]'#query'[/color][color=#009900])[/color].[color=#660066]autocomplete[/color][color=#009900]([/color][color=#009900]{[/color]
serviceurl[color=#339933]:[/color] [color=#3366cc]'service/autocomplete.ashx'[/color][color=#339933],[/color] [color=#006600][i]// page for processing autocomplete requests[/i][/color]
minchars[color=#339933]:[/color] [color=#cc0000]2[/color][color=#339933],[/color] [color=#006600][i]// minimum request length for triggering autocomplete[/i][/color]
delimiter[color=#339933]:[/color] [color=#009966][i]/(,|;)\s*/[/i][/color][color=#339933],[/color] [color=#006600][i]// delimiter for separating requests (a character or regex)[/i][/color]
maxheight[color=#339933]:[/color] [color=#cc0000]400[/color][color=#339933],[/color] [color=#006600][i]// maximum height of the suggestion list, in pixels[/i][/color]
width[color=#339933]:[/color] [color=#cc0000]300[/color][color=#339933],[/color] [color=#006600][i]// list width[/i][/color]
zindex[color=#339933]:[/color] [color=#cc0000]9999[/color][color=#339933],[/color] [color=#006600][i]// list's z-index[/i][/color]
deferrequestby[color=#339933]:[/color] [color=#cc0000]0[/color][color=#339933],[/color] [color=#006600][i]// request delay (milliseconds), if you prefer not to send lots of requests while the user is typing. i usually set the delay at 300 ms.[/i][/color]
params[color=#339933]:[/color] [color=#009900]{[/color] country[color=#339933]:[/color] [color=#3366cc]'yes'[/color][color=#009900]}[/color][color=#339933],[/color] [color=#006600][i]// additional parameters[/i][/color]
onselect[color=#339933]:[/color] [color=#003366][b]function[/b][/color][color=#009900]([/color]data[color=#339933],[/color] value[color=#009900])[/color][color=#009900]{[/color] [color=#009900]}[/color][color=#339933],[/color] [color=#006600][i]// callback function, triggered if one of the suggested options is selected,[/i][/color]
lookup[color=#339933]:[/color] [color=#009900][[/color][color=#3366cc]'january'[/color][color=#339933],[/color] [color=#3366cc]'february'[/color][color=#339933],[/color] [color=#3366cc]'march'[/color][color=#009900]][/color] [color=#006600][i]// list of suggestions for local autocomplete[/i][/color]
[color=#009900]}[/color][color=#009900])[/color][color=#339933];[/color]
[p]根據(jù)文本表單中的輸入信息，進(jìn)行關(guān)鍵字提示匹配。[/p]
[color=#009900]{[/color]
query[color=#339933]:[/color][color=#3366cc]'li'[/color][color=#339933],[/color] [color=#006600][i]// original request[/i][/color]
suggestions[color=#339933]:[/color][color=#009900][[/color][color=#3366cc]'liberia'[/color][color=#339933],[/color][color=#3366cc]'libyan arab jamahiriya'[/color][color=#339933],[/color][color=#3366cc]'liechtenstein'[/color][color=#339933],[/color][color=#3366cc]'lithuania'[/color][color=#009900]][/color][color=#339933],[/color] [color=#006600][i]// list of suggestions[/i][/color]
data[color=#339933]:[/color][color=#009900][[/color][color=#3366cc]'lr'[/color][color=#339933],[/color][color=#3366cc]'ly'[/color][color=#339933],[/color][color=#3366cc]'li'[/color][color=#339933],[/color][color=#3366cc]'lt'[/color][color=#009900]][/color] [color=#006600][i]// optional parameter: list of keys for suggestion options; used in callback functions.[/i][/color]
[color=#009900]}[/color]
[p]jquery autocomplete 插件支持 on/off功能，從而控制效果的開(kāi)關(guān)。[/p]
[color=#003366][b]var[/b][/color] ac [color=#339933]=[/color] $[color=#009900]([/color][color=#3366cc]'#query'[/color][color=#009900])[/color].[color=#660066]autocomplete[/color][color=#009900]([/color][color=#009900]{[/color] [color=#009966][i]/*parameters*/[/i][/color] [color=#009900]}[/color][color=#009900])[/color][color=#339933];[/color]
ac.[color=#660066]disable[/color][color=#009900]([/color][color=#009900])[/color][color=#339933];[/color]
ac.[color=#660066]enable[/color][color=#009900]([/color][color=#009900])[/color][color=#339933];[/color]
ac.[color=#660066]setoptons[/color][color=#009900]([/color][color=#009900]{[/color] zindex[color=#339933]:[/color] 1001 [color=#009900]}[/color][color=#009900])[/color][color=#339933];[/color]
3，設(shè)置表現(xiàn)樣式
[p]最后，用div和css美化表現(xiàn)效果。[/p]
liberia
libyan arab jamahiriya
liechtenstein
lithuania
該文章在 2010/4/26 23:52:36 編輯過(guò) |
關(guān)鍵字查詢(xún)
相關(guān)文章
正在查詢(xún)... 
|
400 186 1886
