`
tap2008
  • 浏览: 51701 次
  • 来自: 湖南株洲
社区版块
存档分类
最新评论

Ajax AutoComplete(Ajax的自动完成)

    博客分类:
  • Ajax
阅读更多
  最近因为项目需要,整理了一下自动完成的例子,代码使用起来非常方便,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
分享到:
评论
3 楼 yxw820816 2008-07-28  
斩情417 写道
我打一个北京的 北字...怎么下拉列表会是false呢??不明白...请楼主说明下

你的这个情况是在firefox下的情况(也能出现,不过反应有点迟钝),ie7下面是正常的
2 楼 yxw820816 2008-07-28  
代码一个注释都没有,比较难看啊!楼主在吗?
1 楼 斩情417 2008-01-31  
我打一个北京的 北字...怎么下拉列表会是false呢??不明白...请楼主说明下

相关推荐

    jquery文本框自动补全ajax autocomplete 完整实例

    在本文中,我们将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能,以及相关的`autocomplete`插件的完整实例。这个功能在许多Web应用程序中非常常见,它能够提高用户输入的效率和用户体验。 首先,让...

    ajax控件自动完成(AutoComplete)

    **Ajax控件自动完成(AutoComplete)** Ajax控件自动完成是一种常见的前端技术,它显著提高了用户在网页上的交互体验,特别是在输入数据时。在网页的搜索框或用户登录界面,这种技术尤其有用,因为它能预测并显示...

    Ajax-autocomplete.zip

    Ajax-autocomplete.zip,远程数据源的简单自动完成库。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的情况...

    jquery文本框自动补全完整实例 ajax autocomplete

    本实例将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能,即"autocomplete"。Ajax(Asynchronous JavaScript and XML)技术允许在不刷新整个页面的情况下与服务器进行异步数据交换,使得用户体验更加...

    Jquery AutoComplete组件+Ajax实现搜索框输入提示功能小记

    - **jQuery AutoComplete插件**:这是一个基于jQuery UI的插件,可以根据用户输入自动搜索和过滤选项,从而帮助用户从预设列表中快速选择合适的项。 #### 实现原理 实现搜索框输入提示功能的核心在于使用JQuery捕获...

    ajax-autocomplete

    本示例"ajax-autocomplete"提供了一个完整的Web应用,用于演示如何实现Ajax自动补全功能。 **一、Ajax 基础** 1. **异步通信**:Ajax 的核心是XMLHttpRequest对象,它允许JavaScript在后台与服务器交换数据,而...

    jquery文本框自动补全ajax autocomplete

    `jQuery UI`是jQuery的一个扩展库,提供了一系列的用户界面组件,其中包括`Autocomplete`功能,这个功能用于实现文本框的自动补全效果。在本篇中,我们将深入探讨如何使用jQuery和jQuery UI的Autocomplete功能,以及...

    jquery easyui TagBox with Autocomplete ajax请求方式自动填充

    在给定的标题“jquery easyui TagBox with Autocomplete ajax请求方式自动填充”中,主要涉及了jQuery EasyUI的TagBox组件,以及其Autocomplete功能与ajax请求方式的结合应用。 TagBox是jQuery EasyUI的一个组件,...

    AJAX基础教程-9 AutoComplete

    **AJAX基础教程-9 AutoComplete** 在Web开发中,AJAX(Asynchronous JavaScript and XML)技术被广泛用于实现页面的无刷新更新,提供更好的用户体验。本教程将聚焦于一个常见的应用场景——AutoComplete功能,它...

    Ajax自动完成完美实现

    在提供的文件中,我们有多个CSS文件,如`autocomplete.css`, `main.css`, 和 `autocomplete_custom.css`,它们可能包含了定义自动完成列表样式的关键代码,比如背景色、字体、边距、动画等。 **4. 示例代码分析** ...

    Ajax实现自动补全和搜索功能(jsp)

    在本项目中,Ajax被用来实现自动补全和搜索功能,提升用户输入体验,减少不必要的页面跳转,提高网页响应速度。 首先,自动补全功能是基于用户输入的字符,在后台数据库或数据源中实时查找匹配项,并在用户输入过程...

    JQuery_Ajax_AutoComplete_使用JSON数据

    在探讨如何利用jQuery的AutoComplete插件结合Ajax与JSON数据实现自动补全功能之前,我们首先需要理解几个关键概念:jQuery、Ajax、JSON以及AutoComplete。 ### jQuery简介 jQuery是一款快速、简洁的JavaScript库,...

    Autocomplete(自动完成 下拉提示框Ajax+ASP.NET+Jquery)(IE、FF兼容)

    在IT领域,自动完成(Autocomplete)是一种常见且实用的功能,尤其在网页搜索或表单输入时,能够提高用户输入效率并提供友好体验。本文将深入探讨如何利用Ajax、ASP.NET和jQuery技术来实现跨浏览器(包括IE和Firefox...

    AJAX 自动完成 支持多选的下拉列表 比JQuery.autocomplete 更好!(有实例)

    本文将深入探讨如何利用AJAX实现一个支持多选功能的自动完成下拉列表,该列表具有类似于JQuery.autocomplete的特性,但提供了更丰富的交互体验。 标题中的"自动完成"是指一种常见于搜索框或输入字段的功能,当用户...

    jquery 自动完成 Autocomplete

    **jQuery自动完成(Autocomplete)** jQuery的自动完成插件是一种强大的交互功能,它允许用户在输入文本时根据已有的数据集快速选择合适的选项。这个功能常见于搜索框、表单填充等场景,极大地提高了用户体验。在本篇...

    jsp+ajax实现输入框自动搜索

    * 使用javascript实现自动完成函数autoComplete() * 使用ajax技术发送请求到服务器,并显示服务器返回的结果 * 使用DOM操作显示服务器返回的结果,并形成下拉表 * 使用键盘选择下拉项的函数selItemByKey() 五、知识...

    jquery autocomplete 动态补全例子有说明ajax加载

    在给定的“jquery autocomplete 动态补全例子”中,我们将探讨如何实现这一功能,特别关注如何通过AJAX加载JSON数据。 **jQuery Autocomplete基本原理** jQuery UI库包含了Autocomplete组件,它可以与普通的HTML...

    jquery.ui.autocomplete-Ajax

    jQuery UI的Autocomplete组件是一个强大的功能,它允许用户在输入时自动填充建议选项,极大地提高了用户体验。这个组件尤其适用于搜索框、表单输入和其他需要动态获取数据的场景。在本篇中,我们将深入探讨jQuery UI...

    ajax jsp 自动完成源代码

    【标题】:“Ajax JSP 自动完成源代码” 在网页应用开发中,用户输入的交互体验至关重要,尤其是在搜索框中实现“自动完成”功能时,能够显著提高用户的操作效率。这个“Ajax JSP 自动完成源代码”项目,就是利用纯...

Global site tag (gtag.js) - Google Analytics