【实例描述】
输入框自动完成是目前比较热门的一种技术，可利用Ajax技术实现无刷新提示功能。本例介绍这种技巧的原理。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
</head>
<body>
<input onkeyup="showtips();if(event.keyCode==27)hideDiv();" id=txt onkeydown= 'enterTips()'>(如：ShanDong)<br/>
<select id=sel style='display:none' onclick=viewTxt() onkeydown='if(event.keyCode= =13)viewTxt()'></select>
<script>
var city = new Array("Guangdong","Tianjing","Shanghai","Beijing","ShanDong", "Shanxi","Hunan","shangdi");
var city2=new Array("广东","天津","上海","北京","山东","陕西","湖南","上地");
function showtips(){
obj=event.srcElement; //获取操作对象
sel.length=0; //列表框的长度
var len=city.length; //数组的长度
var re=new RegExp("^"+obj.value,"i") //正则表达式——搜索用户输入的值
var j=0
for(i=0;i<len;i++)
if(re.test(city[i])==true){ //如果存在搜索的值
sel.style.display=''; //显示提示层
sel.add(new Option(city[i],city2[i]));j++} //提示信息
sel.size = (j>1)?j:2;
}
function enterTips(){
e=event.keyCode;
if(sel.style.display!='none'){ //如果提示层没有隐藏
if(e==13) event.srcElement.value=sel.value,sel.style.display='none'; //回车
if(e==40) sel.focus(); //使用下箭头时，提示层获得焦点
}
}
function viewTxt(){
txt.value=sel.value; //显示选择的内容
hideDiv() //隐藏提示层
}
function hideDiv(){
sel.style.display='none'; //隐藏提示层的显示
txt.focus() //文本框获得焦点
}
document.onclick=function(){ //单击窗体时，隐藏提示层
hideDiv()
}
</script>
</body>
</html>
【难点剖析】
本例通过一个正则表达式完成了自动提示的功能。首先使用“new RegExp”创建了一个正则表达式“re”，然后使用正则的“test”方法，在现有的文本提示信息中查找匹配正则的数据。使用“sel.add”方法将搜索出的数据添加到列表中，并设置列表框为可见，这样就实现了自动提示功能。
分享到：
相关推荐
**Ajax技术详解与自动完成应用** ...自动完成是Ajax应用的一个经典示例，它利用实时的数据查询和动态更新，提高了用户的输入效率。在实际开发中，开发者应灵活运用Ajax，结合后端技术，构建高效、友好的Web应用程序。
自动完成功能的基本原理是：当用户在搜索框中输入字符时，JavaScript监听键盘事件，一旦满足触发条件（如用户停止输入一段时间或达到最小字符数），就发送Ajax请求到服务器。Servlet接收到请求后，基于输入的字符...
【Ajax自动完成技术详解】 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术使得用户可以与网页进行更流畅、更快捷的交互，提高了用户体验。在本...
Ajax控件自动完成是一种常见的前端技术，它显著提高了用户在网页上的交互体验，特别是在输入数据时。在网页的搜索框或用户登录界面，这种技术尤其有用，因为它能预测并显示用户可能输入的选项，从而减少手动输入的...
### AJAX实现Google输入自动完成简单模拟 #### 一、引言 随着Web应用程序的发展，用户体验变得越来越重要。其中，输入自动完成（Auto Complete）功能在许多网站上得到了广泛应用，能够极大地提升用户的输入效率和...
这个文本框自动完成示例是Ajax技术的一个经典应用，它实现了用户在输入文本时，系统能够实时根据输入内容提供匹配建议，提高了用户体验，减少了用户输入的错误率。 在创建Ajax文本框自动完成示例时，我们需要考虑...
本实例将探讨如何利用AJAX根据用户输入的邮编实现自动完成地址信息的功能，这在地图应用、电子商务网站或任何需要地理位置信息的系统中都非常常见。 首先，我们要了解AJAX的基本工作原理。它通过JavaScript创建...
根据提供的文件信息，我们可以深入探讨如何使用 AJAX 技术来实现类似于 Google 输入自动完成的功能。在 Web 开发中，自动完成功能对于提高用户体验非常重要，它可以帮助用户更快地找到他们想要搜索的内容。下面我们...
在用户输入检索的关键词的同时会显示相应的提示信息,帮助用户快速的进行搜索,这类功能成为自动完成功能,这个功能目前在很多软件中实现,而web程序程序只能通过浏览器自身实现. 看完本项目,你将学习到如何实现基于...
本示例中的“ajax联想输入功能”是指利用Ajax技术实现的一种常见交互功能——自动完成功能，常见于搜索引擎、输入框等，能根据用户输入的内容动态给出建议，提高用户体验。 自动完成功能的核心在于实时获取用户输入...
说明: 在用户输入检索的关键词的同时会显示相应的提示信息,帮助用户快速的进行搜索,这类功能成为自动完成功能,这个功能目前在很多软件中实现,而web程序程序只能通过浏览器自身实现.看完本项目,你将学习到如何...
综上所述，"jsp+Ajax表单自动完成"是一个融合了前后端技术的交互式Web开发实践，它利用JSP处理服务器端逻辑，Ajax实现无刷新数据通信，以及JavaScript和相关库增强用户体验。通过这些技术，我们可以构建出类似Google...
标题 "Ajax+JSON 搜索框自动完成提示功能" 涉及的是网页开发中的一个常见技术，用于提高用户输入体验。Ajax（异步JavaScript和XML）是Web开发中的一种技术，它允许页面在不重新加载整个页面的情况下与服务器交换数据...
在本文中，我们将深入探讨如何使用Ajax实现文本框的自动完成功能，这通常是一个用户友好的特性，可以极大地提升用户体验。该示例中，我们将关注的关键知识点包括.NET框架、Ajax控件库、文本框事件处理以及与数据库的...
标题中的“输入框自动完成AJAX”是一种常见的前端开发技术，用于提高用户在网页上的输入效率。自动完成功能，也称为自动填充或建议输入，它根据用户在输入框中键入的内容，动态地提供可能的匹配选项。这种功能在搜索...
1. **Ajax自动补全的基本原理**：自动补全功能通常用于搜索框或输入字段，当用户输入字符时，服务器会实时返回匹配的数据，这些数据可以是建议的搜索词、用户列表或其他相关信息。Ajax通过异步请求在后台处理这些...
在C#和AJAX开发中，自动完成控件是一种常见的用户界面组件，它极大地提高了用户的输入效率和体验。这种控件通常用于搜索框，当用户输入文本时，它会实时地提供与输入相匹配的建议列表。在这个场景下，"c#ajax 自动...
本资源提供了一个基于AJAX实现的自动完成功能，仿照了Google Suggest的方式，即用户输入一个字母后，系统会即时显示与之相关的建议选项。接下来，我们将深入探讨AJAX、自动完成的基本原理以及如何通过AJAX实现这一...
在网页应用中，AJAX自动完成功能通常用于提升用户体验，比如在用户输入时，后台实时搜索匹配数据并显示在输入框下方，常见的应用场景如搜索引擎、表单字段填充等。这种功能可以显著减少用户输入的时间，提高数据输入...
* 使用javascript实现自动完成函数autoComplete() * 使用ajax技术发送请求到服务器，并显示服务器返回的结果 * 使用DOM操作显示服务器返回的结果，并形成下拉表 * 使用键盘选择下拉项的函数selItemByKey() 五、知识...