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>
虽然技术实现上没有什么困难，可是实现的效果却带来了较好的用户体验，引人深思
分享到：
相关推荐
本文实例讲述了JS简单获取并修改input文本框内容的方法。分享给大家供大家参考，具体如下： ...在页面加载后的文本框中将会显示“初始文本内容”，当单击按钮后将会改变文本框中的内容。 三 代码 <html xmlns
动态给fastreport报表中的变量赋值(因论坛中有人提过这问题)!
在 Web 开发中，经常会遇到需要在页面刷新时清空文本框内容的情况，这是一种常见的需求，特别是在注册页面中。当用户刷新页面时，我们希望文本框的内容被清空，以便用户可以重新输入信息。在本文中，我们将探讨如何...
今天小编就为大家分享一篇Layui带搜索的下拉框的使用以及动态数据绑定方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
可以直接套用 1.首先把两个js文件和相关图片加载进来。（把js文件放到您的编辑框具体显示 的位置） 2.然后把变量拷贝进来 3.取编辑框的值： ...通文本框，防止乱码，然后再Action类里取此文本框的值
VB演示如何加载窗体事件的例子，演示当窗体事件发生后就在窗体上输出内容，附代码下载： ... '加载后立即清空文本框 Command1.Caption = "加载事件" '加载后还可以立即修改控件属性的值 End Sub
表检查点可以检查表中的信息，例如表单元格中的值是否正确。 页面检查点可以检查网页的特性，例如加载网页所需的时间、网页是否包含中断链接等。文本/文本区域检查点可以检查文本字符串是否显示在网页或应用程序...
* @功能 实现功能是初始化时文本框中默认值，当鼠标移入则清空默认值；但如果用户没有输入任何值，则还原默认值；提交时候如果是默认值则清空 * @描述 基于jquery 所以使用前必须导入jquery包 * @使用方法: 1,在...
ASP.NET AJAX Control Toolkit 中的SliderExtender 控件对这两个文本框分配滑块功能 ： 复制代码 TargetControlId="Slider1" BoundControlID="SliderValue" /> 另外 ，稍后将使用一个标签元素来通知用户有一次...
点击添加 动态添加两个文本框： 分别表示x和y的值，点击取消 删除本行的2个文本框记得要引入jquery.js 代码如下: [removed][removed] [removed] $(function() { $(“#btnMian”).click(function() { //生成 0 到...
01027在状态栏中显示信息 01028显示、隐藏状态栏 01029显示、隐藏编辑栏 01030显示、隐藏常用工具栏 01031显示、隐藏格式工具栏 01032显示、隐藏任务窗格 01033改变鼠标指针形状 01034切换手动、自动计算 01035切换...
主要功能：勾选子节点的checkbox,右边会动态加载该节点的信息，出现TextBox让用户填写节点的值,点击保存按钮将文本框的值保存到对应的节点。里面涉及到了asp执行ascx页面里的事件，并取值。这是前台的代码:...
（5）当单击【添加】按钮时，在文本框中添加新的内容并将新内容添加到数据表中，并且在DataGridView控件中显示出新的课程信息 （6）所需控件：3个Label；3个TextBox；2个Button；1个DataGridView
四个类Converter，HSL，RGB，TestPanels；HSL与RGB中含有各自的属性；...TestPanels:加载布局,初始化颜色,文本框,以及滑动值;给滑动值添加ChangeListener监听,改变颜色以及文本框中的值，观察结果。
8.9 动态加载HTML内容到标签页中 8.10 使用AJAX刷新异步提交表单 8.11 使用AJAX刷新上传图片 8.12 使用AJAX刷新验证PHP会话是否有效 8.13 在AJAX异步调用时显示加载指示器 8.14 在AJAX异步调用时处理JSON数据 8.15 ...
如果不存在，则将提交的信息新增到用户表中，并根据是否新增成功作出相应的提示。如果新增成功，则还需要关闭当前窗体，刷新父页面用户列表。 四、普通用户页面 我的申请单 1.“我的申请单”列表可以分页显示数据，...
1.3.html 使用JavaScript进行文本框值的判断。 1.4.html 使用JavaScript对网页中的内容进行验证。 1.5.html HMTL中调用.js文件。 1.6.html 使用“”标记，实现的滚动字幕效果。 1.7.html 使用...
0007 在Delphi中加载QReport报表组件 7 1.3 创建DLL文件 8 0008 生成一个DLL文件 8 0009 调用DLL文件 8 1.4 窗体相关操作 9 0010 将组件置前/置后 9 0011 如何锁定窗体中的组件 9 0012 如何改变窗体...