根据文本框中的值动态加载信息

最新推荐文章于 2021-06-04 04:07:05 发布

最新推荐文章于 2021-06-04 04:07:05 发布 · 172 阅读

文章标签：

#百度 #XML #J# #Google #Microsoft

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

为了解决财务系统中报销人员选择不便的问题，通过添加模糊搜索功能提高用户体验。该功能可根据输入的部分姓名快速定位到相应的报销人员。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>