相信许多人都会用过搜索栏自动匹配关键词的功能,无论是像google的专业搜索引擎,还是普通的网站,现在许多都用上了这种关键词匹配技术,本文介绍的用jQuery实现的关键词匹配技术,当然要整合到自己的系统中还需要链接后台的代码。
在现在的Web设计中,提高用户体验是企业最为注重的内容之一。在搜索表单中,根据输入的部分内容进行关键字匹配提示功能,就是最直观和常用的交互体验,类似功能已经被多数的互联网网站应用。例如Google的搜索框效果如下:
这里介绍一个jQuery实现搜索关键字自动匹配提示方法。jQuery AutoComplete 是一个基于jQuery实现搜索关键词自动匹配提示的插件,该插件可扩展性强,表现性能优越,方便整合到自己的项目中使用;兼容IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+, and Chrome 1.0+ 等主流浏览器。
演示效果:http://www.devbridge.com/projects/autocomplete/jquery/#demo
下面是具体的使用方法:
1,使用设置
首页,要把插件的js代码嵌入到你自己的项目中去。
1
2
|
<
script
src
=
"jquery.js"
type
=
"text/javascript"
>
<!--mce:0-->
</
script
>
<
script
src
=
"jquery.autocomplete.js"
type
=
"text/javascript"
>
<!--mce:1-->
</
script
>
|
2,使用方法
为要实现自动匹配提示的 input 表单添加 AutoComplete 功能。
1
|
<
input
id
=
"query"
name
=
"q"
/>
|
初始化 AutoComplete 对象,确保正确加载 DOM 对象,否则IE下的用户可能会出现错误。
1
2
3
4
5
6
7
8
9
10
11
12
|
$(
'#query'
).autocomplete({
serviceUrl:
'service/autocomplete.ashx'
,
// Page for processing autocomplete requests
minChars: 2,
// Minimum request length for triggering autocomplete
delimiter: /(,|;)\s*/,
// Delimiter for separating requests (a character or regex)
maxHeight: 400,
// Maximum height of the suggestion list, in pixels
width: 300,
// List width
zIndex: 9999,
// List's z-index
deferRequestBy: 0,
// 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.
params: { country: 'Yes
'}, // 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
});
|
根据文本表单中的输入信息,进行关键字提示匹配。
1
2
3
4
5
|
{
query:
'Li'
,
// Original request
suggestions:[
'Liberia'
,
'Libyan Arab Jamahiriya'
,
'Liechtenstein'
,
'Lithuania'
],
// List of suggestions
data:[
'LR'
,
'LY'
,
'LI'
,
'LT'
]
// Optional parameter: list of keys for suggestion options; used in callback functions.
}
|
jQuery AutoComplete 插件支持 on/off功能,从而控制效果的开关。
1
2
3
4
|
var
ac = $(
'#query'
).autocomplete({
/*parameters*/
});
ac.disable();
ac.enable();
ac.setOptons({ zIndex: 1001 });
|
3,设置表现样式
最后,用div和css美化表现效果。
1
2
3
4
5
6
7
8
|
<
div
class
=
"autocomplete-w1"
>
<
div
id
=
"Autocomplete_1240430421731"
class
=
"autocomplete"
style
=
"width: 299px;"
>
<
div
><
strong
>Li</
strong
>beria</
div
>
<
div
><
strong
>Li</
strong
>byan Arab Jamahiriya</
div
>
<
div
><
strong
>Li</
strong
>echtenstein</
div
>
<
div
class
=
"selected"
><
strong
>Li</
strong
>thuania</
div
>
</
div
>
</
div
>
|
1
2
3
4
5
|
.autocomplete-w
1
{
background
:
url
(img/shadow.png)
no-repeat
bottom
right
;
position
:
absolute
;
top
:
0px
;
left
:
0px
;
margin
:
6px
0
0
6px
;
/* IE6 fix: */
_background
:
none
;
_margin
:
1px
0
0
0
; }
.autocomplete {
border
:
1px
solid
#999
;
background
:
#FFF
;
cursor
:
default
;
text-align
:
left
;
max-height
:
350px
;
overflow
:
auto
;
margin
:
-6px
6px
6px
-6px
;
/* IE6 specific: */
_height
:
350px
;
_margin
:
0
; _overflow-x:
hidden
; }
.autocomplete .selected {
background
:
#F0F0F0
; }
.autocomplete div {
padding
:
2px
5px
;
white-space
:
nowrap
;
overflow
:
hidden
; }
.autocomplete strong {
font-weight
:
normal
;
color
:
#3399FF
; }
|
jQuery AutoComplete 插件官方链接
插件介绍: www.devbridge.com/projects/autocomplete/jquery/
插件下载: www.devbridge.com/projects/autocomplete/jquery/#download
这里还有一种基于MooTools框架的关键字自动匹配提示方法: