JavaScript学习笔记8--一个文字自动匹配的例子
2007-08-16 03:40
489 查看
今天练习了一下用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>
用到的东西都比较基础,主要是动态操纵组合列表框,当然有很多细节性的东西需要注意。
比如说用户选择完一个选项,要注意把组合列表框隐藏。所以这里把组合列表框放在了一
个层上,隐藏和显示控制起来就方便一点。 效果如下图:
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>
用到的东西都比较基础,主要是动态操纵组合列表框,当然有很多细节性的东西需要注意。
比如说用户选择完一个选项,要注意把组合列表框隐藏。所以这里把组合列表框放在了一
个层上,隐藏和显示控制起来就方便一点。 效果如下图:
相关文章推荐
- JavaScript学习笔记8--一个文字自动匹配的例子
- JavaScript学习笔记8--一个文字自动匹配的例子
- JavaScript学习笔记(1)——一个表格排序的例子
- Spring 学习笔记(1)—— 通过一个小例子体会 IoC 的概念
- JS学习笔记1——不要使用JavaScript内置的parseInt()和Number()函数,利用map和reduce操作实现一个string2int()函数
- JavaScript学习笔记3--文本框获得焦点,文本框里提示信息自动消失
- JavaScript学习笔记整理_用于模式匹配的String方法
- JavaScript学习笔记25-新建一个我们自己的对象
- 【C/C++学习笔记】判断一个点是否在多边形内部的例子
- NAnt学习笔记(1) -- NAnt的配置文件结构和一个简单的NAnt例子
- javaScript学习笔记——如何在加载完某个标签之后执行一个函数
- JavaScript学习笔记4--模拟输入注册码时的自动切换字段
- Mule ESB 学习笔记(11)Web Service Proxy(这里是一个可以正常运行的例子)
- JS学习笔记 - 一个简单例子
- MonoRail学习笔记一:一个小例子
- [mfc学习笔记一]以一个CGdiObject类的绘图例子来看一下绘图操作
- JavaScript学习笔记-用于模式匹配的String方法
- 文字自动补全插件typeahead的使用(学习笔记)
- JavaScript学习笔记3--文本框获得焦点,文本框里提示信息自动消失
- 【C++学习笔记】 C++与JAVA的异同,一个有趣的例子