超碰人人人人人,色婷婷综合久久久久中文一区二区,国产-第1页-浮力影院,欧美老妇另类久久久久久

[p][align=center]在現(xiàn)在的web設(shè)計(jì)中，提高用戶體驗(yàn)是企業(yè)最為注重的內(nèi)容之一。在搜索表單中，根據(jù)輸入的部分內(nèi)容進(jìn)行關(guān)鍵字匹配提示功能，就是最直觀和常用的交互體驗(yàn)，類似功能已經(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下的用戶可能會(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] [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框架的關(guān)鍵字自動(dòng)匹配提示方法：[/p] [b]mootools[/b]: ajaxdaddy.com/mootools-autocomplete.html