根据文本框中的值动态加载信息
google和百度都有这样的功能，搜索框输入值后会自动带出相关搜索项，正好项目上也用到类似的功能：财务系统选择报销人时，因为报销人是从第三方系统同步过来的，没有组织机构和其它信息，导致进行选择时在一个特长的下拉列表中非常不便于查找，解决方式：1，将第三方系统的组织机构信息同步；2，添加一个输入框，根据输入值定位到某个人。因为第三方系统没有组织机构，所以采用第二种方式。
简单的做了实现，贴下代码
xmlbean.js
function student(){var id = "";var name = "";}funcForAjax.js
/** *解析xml文件,实现动态显示效果 *//** *得到指定节点的值 */ function getNode(doc,xpath){var retval = "";var value = doc.selectSingleNode(xpath);if(value) retval = value.text;return retval; } /** *得到所有的信息 */ function getAllChildren(xmlpath){ xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = false; xmlDoc.load(xmlpath); var allChildren = xmlDoc.selectNodes("/dataset/student"); var jsList = new Array(allChildren.length); for(var i = 0; i < allChildren.length; i++){var jschild = new student();jschild.id = getNode(xmlDoc,"/dataset/student["+i+"]/id");jschild.name = getNode(xmlDoc,"/dataset/student["+i+"]/name");jsList[i] = jschild; } return jsList; } /** *在array中查找符合like参数name的记录 */ function getChildrenByName(array,name){ var jsList = new Array(array.length); var count = 0; for(var i = 0; i < array.length; i++){ var jschild = array[i]; var addFlag = true; if(jschild == null){ break; }else{ //当前记录的名字的长度不小于查询的名字的长度 if(jschild.name.length >= name.length){ //分别得到字符数组 var nameCharArray = name.split(""); var childnameCharArray = jschild.name.split(""); for(var j = 0; j < childnameCharArray.length; j ++){ //如果有一个字符和查询的第一个字符相同 //而且当前名字中剩下的字符长度不小于查询的名字中剩下的字符长度 if(childnameCharArray[j] == nameCharArray[0] && childnameCharArray.length-j-1 >= nameCharArray.length-1){ for(var k = 0; k < nameCharArray.length; k ++){ //如果剩下的字符中有一个在对应位置上不相同 if(childnameCharArray[j + k] != nameCharArray[k]){ addFlag = false; } } //满足条件,添加 if(addFlag){ jsList[count] = jschild; count ++; } } } } } } return jsList; } function createTable(elementid,array){ var str = "<table align=center><tr><td>序号</td><td>名字</td></tr>"; for(var i = 0; i < array.length; i++){ var jschild = array[i]; if(jschild == null){ break; }else{ str += "<tr><td>" + (i+1) + "</td>" + "<td>" + jschild.name + "</td></tr>"; } } str += "</table>"; document.getElementById(elementid).innerHTML = str; }ajaxtest.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script language="javascript" src="/js/funcForAjax.js"></script><script language="javascript" src="/js/xmlbean.js"></script></head><body><form name="form"><div align="center"><input type="text" align="center" id="search" name="search" onkeyup="changeSearch()"/></div><div id="datadiv" align="center"></div></form></body></html><script language="javascript">var allChildren;var searchValue = "";function getAll(){var jsList = getAllChildren("xml/student.xml");allChildren = jsList;createTable("datadiv",jsList);}function changeSearch(){if(searchValue != document.form.search.value){searchValue = document.form.search.value;if(searchValue == ""){getAll();}else{var jsList = getChildrenByName(allChildren,searchValue);createTable("datadiv",jsList);}}}getAll();</script>student.xml
<?xml version="1.0" encoding="UTF-8"?><dataset><student><id>1001</id><name>张三甲</name></student><student><id>1002</id><name>张三乙</name></student><student><id>1003</id><name>李四甲</name></student><student><id>1004</id><name>李四乙</name></student><student><id>1005</id><name>王二麻子</name></student></dataset>
虽然技术实现上没有什么困难，可是实现的效果却带来了较好的用户体验，引人深思