该资源是一个基于jQuery实现的自动补全功能的示例代码,主要涉及到jQuery库、jQuery UI的Autocomplete插件以及相关的CSS样式文件。这个例子展示了如何使用jQuery来创建一个简单的搜索框,当用户输入时,它将提供Google或百度似的自动提示效果。 在jQuery自动补全功能中,有几个关键点需要注意: 1. 数据获取:在实际应用中,自动补全的数据可能来自服务器,例如通过Ajax请求从后台获取。在这个示例中,虽然没有具体的数据获取部分,但通常会使用`request.getParameter()`方法从HTTP请求中获取查询参数,如`q`,然后进行解码和转换,确保正确处理字符编码问题。 2. JavaScript准备:页面中引入了多个jQuery相关的JavaScript文件,包括`jquery-latest.js`(基础jQuery库)、`jquery.bgiframe.min.js`(用于解决某些浏览器的背景iframe问题)、`jquery.dimensions.js`(处理元素尺寸)以及核心的`jquery.autocomplete.js`(自动补全功能)。同时,也引入了样式表`jquery.autocomplete.css`以美化自动补全的提示列表。 3. jQuery代码执行:在`$(document).ready()`函数内,当文档加载完成时,调用`$("#example").autocomplete("Jquery");`这行代码,为ID为`example`的输入框激活自动补全功能。这里`"Jquery"`通常是数据源或处理函数,但在这个简化的例子中,它可能是被硬编码的提示项。 4. Autocomplete插件使用:`jquery.autocomplete.js`是jQuery UI的Autocomplete插件,它提供了自动补全的基本功能。插件允许用户自定义各种配置,如数据源、提示显示方式、筛选逻辑等。在实际应用中,你需要根据需求配置数据源(可以是静态数组,也可以是动态请求的URL)和其他相关选项。 5. HTML结构:HTML部分包含了一个输入框`<input id="example" size=40/>`,它是用户输入和触发自动补全的地方。此外,`<script>`标签内的JavaScript代码负责初始化自动补全功能。 6. API参考:在HTML中的`APIReference:`文本后面有一个输入框,提示用户可以尝试输入"C"或"E"来体验自动补全功能。在实际应用中,这个提示可以根据实际场景和提供的数据进行修改。 7. 实现原理:jQuery Autocomplete插件的工作原理大致是监听用户在输入框中的输入事件,当用户输入达到一定长度或有特定停顿时,向服务器发送请求获取匹配的数据,然后将这些数据以提示列表的形式展示给用户。 这个资源提供了一个基本的jQuery自动补全功能的实现框架,你可以根据实际项目需求,比如数据来源、提示效果、交互逻辑等,对代码进行相应的扩展和定制。
1,中文传参,参数名称没有改动,仍是默认的q:
String toPage = request.getParameter("q");
page= new String(toPage.getBytes("ISO-8859-1"), "UTF-8");
2,支持上下翻页,并且文本框的值即时改动,和google、百度一个效果
3,鼠标事件,鼠标离开时层失去焦点,不锁定提示层
4,已经匹配的字用细体显示,未匹配的用黑体显示,
5,,增加提交之前的验证,比入输入中文时候需要敲空格,则输入之前不传参,
还有一些细微的完善,此处不赘述,需注意的是,若需实现本人完善的效果,需要另存本人的jquery.autocomplete.js文件,以及jquery.autocomplete.css文件,另外几个文件,请到官网下载:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
jquery.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="js/jquery-latest.js"></script>
<link rel="stylesheet" href="js/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="js/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
$(document).ready(function(){
$("#example").autocomplete("Jquery");
});
</script>
</head>
<body>
API Reference: <input id="example" size=40/> (try "C" or "E")
</body>
</html>
jquery.autocomplete.js代码如下:
/**
* 此js为本人修改完善版,以下功能
* ---李小朋 2:45 2010-10-31
**/
;(function($) {
$.fn.extend({
autocomplete: function(urlOrData, options) {
var isUrl = typeof urlOrData == "string";
options = $.extend({}, $.Autocompleter.defaults, {
url: isUrl ? urlOrData : null,
data: isUrl ? null : urlOrData,
剩余29页未读,继续阅读
- 粉丝: 0
- 资源: 13
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 李兴华Java基础教程:从入门到精通
- U盘与硬盘启动安装教程:从菜鸟到专家
- C++面试宝典:动态内存管理与继承解析
- C++ STL源码深度解析:专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手:数据管理与企业增值的战略
- Eclipse IDE基础教程:从入门到精通
- Shell脚本专家宝典:全面学习与资源指南
- Tomcat安装指南:附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华:必备术语集锦