[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