最近因为项目需要,整理了一下自动完成的例子,代码使用起来非常方便,javascript只需要一句代码,后台只要生成指定格式的div就可以了,封装的javascript代码会帮你处理一切。
整理了一个struts1.2的例子,见附件。源代码在/WEB-INF/classes下面。
其中对编码的处理是使用escape,javascript编码,就不会出现中文乱码。不仅可以自动完成,还可以对文本框、下拉框赋值,只要定义id就可以了,因为使用了prototype的$(""),这个标记与document.getElementById("")是等价的。
简单描述一下,具体可以看附件:
首先导入所需要的js文件
<%
String context = request.getContextPath();
%>
<script type="text/javascript" src="<%= context%>/js/lib/prototype.js"></script>
<script type="text/javascript" src="<%= context%>/js/lib/autocomplete.js"></script>
<link rel="stylesheet" type="text/css" href="<%= context%>/css/autocomplete/autocomplete.css" />
然后加上简单的一句javascript代码就OK了。
<script type="text/javascript">
//只要一句话就可以完成自动完成,提高开发速度,count表示一次显示的记录条数,显示记录的时候,超过10条显示下拉框
new AutoTip.AutoComplete("province", function() {
return "<%= context%>/autocomplete.do?method=province&count=10&inputValue=" + escape(this.text.value);
});
</script>
其中/autocomplete.do?method=province为struts1.2里面的DispatchAction的路径,括号里面的province为需要自动完成的文本框的name值。
可以看一下效果
- 大小: 576.1 KB
- 大小: 589.6 KB
分享到:
- 2007-10-07 23:49
- 浏览 5532
- 评论(3)
- 论坛回复 / 浏览 (3 / 15126)
- 查看更多
相关推荐
在本文中,我们将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能,以及相关的`autocomplete`插件的完整实例。这个功能在许多Web应用程序中非常常见,它能够提高用户输入的效率和用户体验。 首先,让...
**Ajax控件自动完成(AutoComplete)** Ajax控件自动完成是一种常见的前端技术,它显著提高了用户在网页上的交互体验,特别是在输入数据时。在网页的搜索框或用户登录界面,这种技术尤其有用,因为它能预测并显示...
Ajax-autocomplete.zip,远程数据源的简单自动完成库。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的情况...
本实例将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能,即"autocomplete"。Ajax(Asynchronous JavaScript and XML)技术允许在不刷新整个页面的情况下与服务器进行异步数据交换,使得用户体验更加...
- **jQuery AutoComplete插件**:这是一个基于jQuery UI的插件,可以根据用户输入自动搜索和过滤选项,从而帮助用户从预设列表中快速选择合适的项。 #### 实现原理 实现搜索框输入提示功能的核心在于使用JQuery捕获...
本示例"ajax-autocomplete"提供了一个完整的Web应用,用于演示如何实现Ajax自动补全功能。 **一、Ajax 基础** 1. **异步通信**:Ajax 的核心是XMLHttpRequest对象,它允许JavaScript在后台与服务器交换数据,而...
`jQuery UI`是jQuery的一个扩展库,提供了一系列的用户界面组件,其中包括`Autocomplete`功能,这个功能用于实现文本框的自动补全效果。在本篇中,我们将深入探讨如何使用jQuery和jQuery UI的Autocomplete功能,以及...
在给定的标题“jquery easyui TagBox with Autocomplete ajax请求方式自动填充”中,主要涉及了jQuery EasyUI的TagBox组件,以及其Autocomplete功能与ajax请求方式的结合应用。 TagBox是jQuery EasyUI的一个组件,...
**AJAX基础教程-9 AutoComplete** 在Web开发中,AJAX(Asynchronous JavaScript and XML)技术被广泛用于实现页面的无刷新更新,提供更好的用户体验。本教程将聚焦于一个常见的应用场景——AutoComplete功能,它...
在提供的文件中,我们有多个CSS文件,如`autocomplete.css`, `main.css`, 和 `autocomplete_custom.css`,它们可能包含了定义自动完成列表样式的关键代码,比如背景色、字体、边距、动画等。 **4. 示例代码分析** ...
在本项目中,Ajax被用来实现自动补全和搜索功能,提升用户输入体验,减少不必要的页面跳转,提高网页响应速度。 首先,自动补全功能是基于用户输入的字符,在后台数据库或数据源中实时查找匹配项,并在用户输入过程...
在探讨如何利用jQuery的AutoComplete插件结合Ajax与JSON数据实现自动补全功能之前,我们首先需要理解几个关键概念:jQuery、Ajax、JSON以及AutoComplete。 ### jQuery简介 jQuery是一款快速、简洁的JavaScript库,...
在IT领域,自动完成(Autocomplete)是一种常见且实用的功能,尤其在网页搜索或表单输入时,能够提高用户输入效率并提供友好体验。本文将深入探讨如何利用Ajax、ASP.NET和jQuery技术来实现跨浏览器(包括IE和Firefox...
本文将深入探讨如何利用AJAX实现一个支持多选功能的自动完成下拉列表,该列表具有类似于JQuery.autocomplete的特性,但提供了更丰富的交互体验。 标题中的"自动完成"是指一种常见于搜索框或输入字段的功能,当用户...
**jQuery自动完成(Autocomplete)** jQuery的自动完成插件是一种强大的交互功能,它允许用户在输入文本时根据已有的数据集快速选择合适的选项。这个功能常见于搜索框、表单填充等场景,极大地提高了用户体验。在本篇...
* 使用javascript实现自动完成函数autoComplete() * 使用ajax技术发送请求到服务器,并显示服务器返回的结果 * 使用DOM操作显示服务器返回的结果,并形成下拉表 * 使用键盘选择下拉项的函数selItemByKey() 五、知识...
在给定的“jquery autocomplete 动态补全例子”中,我们将探讨如何实现这一功能,特别关注如何通过AJAX加载JSON数据。 **jQuery Autocomplete基本原理** jQuery UI库包含了Autocomplete组件,它可以与普通的HTML...
jQuery UI的Autocomplete组件是一个强大的功能,它允许用户在输入时自动填充建议选项,极大地提高了用户体验。这个组件尤其适用于搜索框、表单输入和其他需要动态获取数据的场景。在本篇中,我们将深入探讨jQuery UI...
【标题】:“Ajax JSP 自动完成源代码” 在网页应用开发中,用户输入的交互体验至关重要,尤其是在搜索框中实现“自动完成”功能时,能够显著提高用户的操作效率。这个“Ajax JSP 自动完成源代码”项目,就是利用纯...