欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

[p][align=center]在現在的web設計中，提高用戶體驗是企業最為注重的內容之一。在搜索表單中，根據輸入的部分內容進行關鍵字匹配提示功能，就是最直觀和常用的交互體驗，類似功能已經被多數的互聯網網站應用。例如google的搜索框效果如下：[img]http://bbon.cn/wp-content/uploads/2009/11/image_thumb8.png[/img][/align][/p] 這里介紹一個jquery實現搜索關鍵字自動匹配提示方法。jquery autocomplete 是一個基于jquery實現搜索關鍵字自動匹配提示的插件，該插件可擴展性強，表現性能優越，方便整合到自己的項目中使用；兼容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，使用設置 [p]首頁，要把插件的js代碼嵌入到你自己的項目中去。[/p] 2，使用方法 [p]為要實現自動匹配提示的 input 表單添加 autocomplete 功能。[/p] [p]初始化 autocomplete 對象，確保正確加載 dom 對象，否則ie下的用戶可能會出現錯誤。[/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]根據文本表單中的輸入信息，進行關鍵字提示匹配。[/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功能，從而控制效果的開關。[/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，設置表現樣式 [p]最后，用div和css美化表現效果。[/p] [color=#6666ff].autocomplete-w1[/color] [color=#00aa00]{[/color] [color=#000000][b]background[/b][/color][color=#00aa00]:[/color][color=#993333]url[/color][color=#00aa00]([/color][color=#ff0000][i]img/shadow.png[/i][/color][color=#00aa00])[/color] [color=#993333]no-repeat[/color] [color=#000000][b]bottom[/b][/color] [color=#000000][b]right[/b][/color][color=#00aa00];[/color] [color=#000000][b]position[/b][/color][color=#00aa00]:[/color][color=#993333]absolute[/color][color=#00aa00];[/color] [color=#000000][b]top[/b][/color][color=#00aa00]:[/color][color=#933]0px[/color][color=#00aa00];[/color] [color=#000000][b]left[/b][/color][color=#00aa00]:[/color][color=#933]0px[/color][color=#00aa00];[/color] [color=#000000][b]margin[/b][/color][color=#00aa00]:[/color][color=#933]6px[/color] 0 0 [color=#933]6px[/color][color=#00aa00];[/color] [color=#808080][i]/* ie6 fix: */[/i][/color] _background[color=#00aa00]:[/color][color=#993333]none[/color][color=#00aa00];[/color] _margin[color=#00aa00]:[/color][color=#933]1px[/color] 0 0 [color=#cc66cc]0[/color][color=#00aa00];[/color] [color=#00aa00]}[/color] [color=#6666ff].autocomplete[/color] [color=#00aa00]{[/color] [color=#000000][b]border[/b][/color][color=#00aa00]:[/color][color=#933]1px[/color] [color=#993333]solid[/color] [color=#cc00cc]#999[/color][color=#00aa00];[/color] [color=#000000][b]background[/b][/color][color=#00aa00]:[/color][color=#cc00cc]#fff[/color][color=#00aa00];[/color] [color=#000000][b]cursor[/b][/color][color=#00aa00]:[/color][color=#993333]default[/color][color=#00aa00];[/color] [color=#000000][b]text-align[/b][/color][color=#00aa00]:[/color][color=#000000][b]left[/b][/color][color=#00aa00];[/color] [color=#000000][b]max-height[/b][/color][color=#00aa00]:[/color][color=#933]350px[/color][color=#00aa00];[/color] [color=#000000][b]overflow[/b][/color][color=#00aa00]:[/color][color=#993333]auto[/color][color=#00aa00];[/color] [color=#000000][b]margin[/b][/color][color=#00aa00]:[/color][color=#933]-6px[/color] [color=#933]6px[/color] [color=#933]6px[/color] [color=#933]-6px[/color][color=#00aa00];[/color] [color=#808080][i]/* ie6 specific: */[/i][/color] _height[color=#00aa00]:[/color][color=#933]350px[/color][color=#00aa00];[/color] _margin[color=#00aa00]:[/color][color=#cc66cc]0[/color][color=#00aa00];[/color] _overflow-x[color=#00aa00]:[/color][color=#993333]hidden[/color][color=#00aa00];[/color] [color=#00aa00]}[/color] [color=#6666ff].autocomplete[/color] [color=#6666ff].selected[/color] [color=#00aa00]{[/color] [color=#000000][b]background[/b][/color][color=#00aa00]:[/color][color=#cc00cc]#f0f0f0[/color][color=#00aa00];[/color] [color=#00aa00]}[/color] [color=#6666ff].autocomplete[/color] div [color=#00aa00]{[/color] [color=#000000][b]padding[/b][/color][color=#00aa00]:[/color][color=#933]2px[/color] [color=#933]5px[/color][color=#00aa00];[/color] [color=#000000][b]white-space[/b][/color][color=#00aa00]:[/color][color=#993333]nowrap[/color][color=#00aa00];[/color] [color=#000000][b]overflow[/b][/color][color=#00aa00]:[/color][color=#993333]hidden[/color][color=#00aa00];[/color] [color=#00aa00]}[/color] [color=#6666ff].autocomplete[/color] strong [color=#00aa00]{[/color] [color=#000000][b]font-weight[/b][/color][color=#00aa00]:[/color][color=#993333]normal[/color][color=#00aa00];[/color] [color=#000000][b]color[/b][/color][color=#00aa00]:[/color][color=#cc00cc]#3399ff[/color][color=#00aa00];[/color] [color=#00aa00]}[/color] jquery autocomplete 插件官方鏈接 [b]插件介紹[/b]: devbridge.com/projects/autocomplete/jquery/ [b]插件下載[/b]: devbridge.com/projects/autocomplete/jquery/#download [p]這里還有一種基于mootools框架的關鍵字自動匹配提示方法：[/p] [b]mootools[/b]: ajaxdaddy.com/mootools-autocomplete.html