今天练习了一下用javascript做文字自动匹配的功能,类似于Google Suggest,当然人家 Google是连接后台数据库,在网上不方便做连接数据库,所有功能在前台实现。 在javascript里定义了一个全局数组arrCities用来存储一些城市的名字。然后当我们在 文本输入框里输入某个城市的名字的时候,每输入完一个字,就会拿当前的文字到arrCities 数组里去比对,看是否存在于arrCities的某个成员里。若存在,就把该成员添加到紧靠文本 输入框下面的组合列表框里,供我们选择,这样我们就不用完全输入完整个城市的名字,只要 从下面选择一个就可以完成想要做的工作。看下面的例子:
<
html
>
<
head
>
<
title
>
Autosuggest Example
</
title
>
<
script
type
="text/javascript"
>
var
arrCities
=
[
"
北京
"
,
"
上海
"
,
"
合肥
"
,
"
南京
"
,
"
哈尔滨
"
,
"
乌鲁木齐
"
,
"
广州
"
,
"
重庆
"
,
"
深圳
"
,
"
大连
"
,
"
呼和浩特
"
,
"
长春
"
,
"
西安
"
,
"
沈阳
"
,
"
杭州
"
,
"
香港
"
,
"
台北
"
,
"
澳门
"
,
"
齐齐哈尔
"
,
"
安庆
"
,
"
成都
"
,
"
南昌
"
,
"
无锡
"
,
"
苏州
"
,
"
郑州
"
,
"
石家庄
"
,
"
长沙
"
,
"
南宁
"
,
"
福州
"
,
"
拉萨
"
,
"
昆明
"
,
"
大庆
"
,
"
武汉
"
]; arrCities.sort();
//
控制是否显示层div1,bFlag为true则表示显示div1,为false则把div1从页面流里移除
function
showDiv1(bFlag){
var
oDiv
=
document.getElementById(
"
div1
"
);
if
(bFlag){ oDiv.style.display
=
"
block
"
; }
else
{ oDiv.style.display
=
"
none
"
; } };
//
给sel1添加option
function
addOption(oListbox,sText){
var
oOption
=
document.createElement(
"
option
"
); oOption.appendChild(document.createTextNode(sText)); oListbox.appendChild(oOption); };
//
移除一个option
function
removeOption(oListbox,iIndex){ oListbox.remove(iIndex); };
//
移除所有的option
function
clearOptions(oListbox){
for
(
var
i
=
oListbox.options.length
-
1
;i
>=
0
;i
--
){ removeOption(oListbox,i); } };
//
设置select里的第一个option被选中
function
setFirstSelected(oListbox){
if
(oListbox.options.length
>
0
){ oListbox.options[
0
].selected
=
true
; } }
//
获取匹配的字段
function
getAutosuggestMatches(sText,arrValues){
var
arrResult
=
new
Array;
if
(sText
!=
""
){
for
(
var
i
=
0
;i
<
arrValues.length;i
++
){
if
(arrValues[i].indexOf(sText)
==
0
){ arrResult.push(arrValues[i]); } } }
else
{ showDiv1(
false
); }
return
arrResult; };
//
把匹配的字段添加到sel1中
function
addSuggestOptions(oTextbox,arrValues,sListboxId,oEvent){
var
oListbox
=
document.getElementById(sListboxId); clearOptions(oListbox);
var
arrMatches
=
getAutosuggestMatches(oTextbox.value,arrValues);
if
(arrMatches.length
>
0
){ showDiv1(
true
);
for
(
var
i
=
0
;i
<
arrMatches.length;i
++
){ addOption(oListbox,arrMatches[i]); } setFirstSelected(oListbox);
if
(oEvent.keyCode
==
8
){ oTextbox.focus(); }
else
{ oListbox.focus(); } } };
//
获取select里的option到textbox
function
getSuggestText(oListbox,sTextboxId){
var
oTextbox
=
document.getElementById(sTextboxId);
if
(oListbox.selectedIndex
>-
1
){ oTextbox.value
=
oListbox.options[oListbox.selectedIndex].text; } oTextbox.focus(); showDiv1(
false
); }
//
通过Enter键确定选项
function
getSuggestText2(oListbox,sTextboxId,oEvent){
if
(oEvent.keyCode
==
13
){ getSuggestText(oListbox,sTextboxId); } }
</
script
>
</
head
>
<
body
>
<
p
>
请输入一个城市的名字:
</
p
>
<
p
>
<
input
type
="text"
id
="txt1"
value
=""
size
="27"
onkeyup
="addSuggestOptions(this,arrCities,'sel1',event)"
/><
br
/>
<
div
id
="div1"
style
="background-color:white;display:none;"
>
<
select
id
="sel1"
style
="width:202px"
size
="6"
onclick
="getSuggestText(this,'txt1')"
onkeyup
="getSuggestText2(this,'txt1',event)"
>
</
select
>
</
div
>
</
p
>
</
body
>
</
html
>
用到的东西都比较基础,主要是动态操纵组合列表框,当然有很多细节性的东西需要注意。 比如说用户选择完一个选项,要注意把组合列表框隐藏。所以这里把组合列表框放在了一 个层上,隐藏和显示控制起来就方便一点。 效果如下图: