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>
虽然技术实现上没有什么困难，可是实现的效果却带来了较好的用户体验，引人深思
分享到：
相关推荐
在本文中，我们将深入探讨如何使用POI库来替换Word2007文档中的文本框值，这对于自动化报告生成、批量文档编辑以及模板驱动的文档创建等场景非常有用。 首先，我们需要了解Word2007文档（.docx）的内部结构。它是...
- 实时过滤是指用户在文本框中输入时，下拉选项会自动根据输入内容动态调整。这种功能通过监听文本框的`TextChanged`事件来实现，每当文本内容改变，就会触发过滤逻辑。 4. **数据源（DataSource）**： - 数据源...
具体到本文的场景，用户在文本框中输入一个值后，通过点击“生成”按钮，应用程序将根据用户输入的值动态创建一个CheckBox控件，并将其添加到页面上的CheckBoxList控件中。这个过程涉及到以下几个关键步骤： 1. ...
在这个主题中，我们将深入探讨如何使用 jQuery 来实现文本框中的自动提示信息功能。 首先，`jQuery` 是一个轻量级的 JavaScript 库，它简化了 JavaScript 的DOM操作、事件处理和动画效果。对于“自动在文本框提示...
可以使用ArrayList、List或其他适合的集合类型，根据文本框的数量动态调整大小，并在提交表单时遍历所有文本框，将值添加到数组中。 5. **视图状态管理**：由于动态控件在回发时不会自动保留，我们需要使用视图状态...
4. **计数更新**: 每次添加或删除文本框后，都会更新`totalNumber`输入框中的值，以记录当前表格中总的文本框数量。 通过以上步骤，我们可以实现一个动态的文本框生成与删除的功能。这种方式不仅增强了用户体验，也...
同时，当程序启动时，需要查询这个表并将历史记录加载回文本框中。 实现这一功能的关键步骤如下： 1. **创建数据库表**：在SQL Server 2005中创建一个名为`InputHistory`的表，包含`UserID`(如果适用)和`InputText...
在这个场景中，用户通过下拉框选择姓名，然后相应的手机号、地址和单位信息会在文本框中动态加载。以下是如何实现这一功能的详细步骤： 1. **数据库连接**： 首先，我们需要建立与Access数据库的连接。在`conn.asp...
在网页开发中，"根据邮政编码加载地区信息"是一个常见的需求，特别是在地址填写或物流配送等场景下。这个功能通常通过Ajax技术实现，它能够无刷新地从服务器获取数据并更新页面部分区域，提高用户体验。下面我们将...
**内容变更事件**（change）则确保了用户一旦在文本框中输入内容，无论是否获得焦点，都不会被初始值覆盖。这是因为插件监听了`change`事件，当检测到文本内容有变动时，就会阻止恢复初始值的操作，从而保护用户的...
在本文中，我们将探讨如何使用jQuery来实现动态加载select下拉列表项的功能。这是一个非常实用的技术，特别是在网页应用中，当需要根据用户的选择或者特定条件动态更新下拉选项时。 **需求说明：** 传统的select...
在网页设计和开发中，创建具有默认灰色文本的文本框是一种常见的需求，这通常用于提供提示信息或预填充用户可能需要输入的数据。标题和描述提到的"文本框默认值灰色方法"涉及到使用JavaScript库jQuery来实现这一效果...
- 考虑使用数据绑定，将下拉框选项动态加载，适应数据变化。 总的来说，"C#文本框输入提示功能 下拉框"这个主题涵盖了C#中提高用户交互体验的常见技术，通过学习和实践这些知识，你可以创建更友好、更高效的用户...
本文档的核心技术在于利用VB中的`DateAdd()`函数，并结合文本框控件的`KeyPress`事件来响应用户的键盘输入，实现在文本框中动态调整日期的功能。具体来说，当用户按下加号(`+`)键时，程序会调用`DateAdd()`函数使...
在脚本中，你可以根据需要动态地改变变量的值。例如，你可以用`Script`方法执行一段Pascal代码，像这样： ```pascal FRXReport1.Script.Text := 'Var1 := Var2 + 5;'; FRXReport1.ExecuteScript; ``` 这会在...
3. **过滤下拉框选项**：根据输入值，遍历下拉框中的所有选项，筛选出包含输入值的选项。可以使用JavaScript的`filter()`方法实现。 4. **更新下拉框显示**：将匹配到的选项设置为下拉框的可见选项。如果使用原生的...
当页面加载时，可以检查本地存储，如果有保存的值，就恢复到文本元素中。 8. **优化用户体验**：考虑添加一些额外的用户体验改进，如防止多次双击触发，使用模态对话框（modal dialog）以更好地隔离编辑区域，或者...
在本文中，我们将深入探讨如何使用jQuery来创建一个功能丰富的文本框，该文本框能够动态地生成和管理关键词标签。这个功能广泛应用于各种网站，如社交媒体、博客平台、论坛等，帮助用户方便地组织和分类内容。 首先...
这个文本框自动完成示例是Ajax技术的一个经典应用，它实现了用户在输入文本时，系统能够实时根据输入内容提供匹配建议，提高了用户体验，减少了用户输入的错误率。 在创建Ajax文本框自动完成示例时，我们需要考虑...
Cookie是一种在用户浏览器端存储少量信息的技术，它可以用来保存用户的偏好设置、登录状态或者如本例中的文本框内容。 首先，我们要理解JavaScript在其中的角色。JavaScript是一种运行在客户端的脚本语言，它可以...