JavaScript学习笔记8--一个文字自动匹配的例子

来源：互联网发布：淘宝买家如何申请退款编辑：程序博客网时间：2024/06/05 16:42

今天练习了一下用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添加optionfunction addOption(oListbox,sText){ var oOption=document.createElement("option"); oOption.appendChild(document.createTextNode(sText)); oListbox.appendChild(oOption);};//移除一个optionfunction removeOption(oListbox,iIndex){ oListbox.remove(iIndex);};//移除所有的optionfunction 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到textboxfunction 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>

用到的东西都比较基础，主要是动态操纵组合列表框，当然有很多细节性的东西需要注意。比如说用户选择完一个选项，要注意把组合列表框隐藏。所以这里把组合列表框放在了一个层上，隐藏和显示控制起来就方便一点。效果如下图: