jQuery autocomplate 自扩展插件、自动完成示例代码


Posted in Javascript onMarch 28, 2011
不过做了浏览器方面的兼容,经测试兼容IE6+、Firefox3.5+ 
首先看看autocomplate.js: 
;(function ($) { 
var index = -1; 
var timeId; 
var cssOptions = { 
"border": "1px solid black", 
"background-color": "white", 
"position": "absolute"/*, 
"font": "normal normal lighter 14px 6px Times New Roman"*/ 
}; 
var defaults = { 
width: "auto", 
highlightColor: "#3399FE", 
unhighlightColor: "#FFFFFF", 
css: cssOptions, 
dataType: "xml", 
paramName: "word", 
delay: 500, 
max: 20 
}; 
var keys = { 
UP: 38, 
DOWN: 40, 
DEL: 46, 
TAB: 9, 
ENTER: 13, 
ESC: 27, 
/*COMMA: 188,*/ 
PAGEUP: 33, 
PAGEDOWN: 34, 
BACKSPACE: 8, 
A: 65, 
Z: 90 
}; 
$.fn.extend({ 
autocomplete: function (sUrl, settings) { 
sUrl = (typeof sUrl === "string") ? sUrl : ""; 
var param = !this.attr("id") ? defaults.paramName : this.attr("id"); 
settings = $.extend({}, defaults, {url: sUrl, paramName: param}, settings); 
var autoTip = this.autoTipTemplate(this, settings); 
$("body").append(autoTip); 
var $this = this; 
this.keyup(function (event) { 
$this.keyOperator(event, autoTip, settings); 
}); 
/*$("input[type=button]").click(function () { 
$("#result").text("文本框中的【" + search.val() + "】被提交了!"); 
$("#auto").hide(); 
index = - 1; 
});*/ 
return this.each(function () { 
$this.val(); 
}); 
}, 
autoTipTemplate: function (input, settings) { 
var inputOffset = input.offset(); 
var autoTip = $("<div/>").css(settings.css).hide() 
.css("top", inputOffset.top + input.height() + 5 + "px") 
.css("left", inputOffset.left + "px"); 
var space = $.browser.mozilla ? 2 : 6;//兼容浏览器 
var tipWidth = (typeof settings.width === "string" && "auto") ? input.width() : settings.width; 
autoTip.width(tipWidth + space + "px"); 
return autoTip; 
}, 
select: function (target, index, settings, flag) { 
var color = flag ? settings.highlightColor : settings.unhighlightColor; 
target.children("div").eq(index).css("background-color", color); 
}, 
keyOperator: function (event, autoTip, settings) { 
var evt = event || window.event; 
var autoNodes = autoTip.children("div"); 
var kc = evt.keyCode; 
var $this = this; 
/* 当用户按下字母或是delete 或是退格键*/ 
if (kc >= keys.A && kc <= keys.Z || kc == keys.BACKSPACE || kc == keys.DEL) { 
var wordText = this.val(); 
if (wordText.length != 0) { 
var param = {}; 
param[settings.paramName] = wordText; 
clearTimeout(timeId); 
timeId = setTimeout(function () { 
$.post(settings.url, param, function (data) { 
var wordObj = $(data); 
if (settings.dataType == "xml") { 
var wordNodes = wordObj.find("word"); 
autoTip.html(""); 
wordNodes.each(function (i) { 
var divNode = $("<div>").attr("id", i); 
//将遍历的单词加入到创建的div中,然后把该div追加到auto中 
divNode.html($(this).text()).appendTo(autoTip); 
//鼠标已进去,添加高亮 
divNode.mousemove(function () { 
//如果已经存在高亮,去掉高亮改为白色 
if (index != -1) { 
autoTip.children("div").eq(index).css("background-color", settings.unhighlightColor); 
} 
index = $(this).attr("id"); 
$(this).css("background-color", settings.highlightColor); 
}); 
//鼠标移出,取消高亮 
divNode.mouseout(function () { 
$(this).css("background-color", settings.unhighlightColor); 
}); 
//点击高亮内容 
divNode.click(function () { 
$this.val($(this).text()); 
index = -1; 
autoTip.hide(); 
}); 
}); 
if (wordNodes.length > 0) { 
autoTip.show(); 
} else { 
autoTip.hide(); 
index = -1; 
} 
} 
}); 
}, settings.delay); 
} else { 
autoTip.hide(); 
index = -1; 
} 
} else if (kc == keys.UP || kc == keys.DOWN) {/*当用户按下上下键*/ 
if (kc == keys.UP) {//向上 
if (index != -1) { 
autoNodes.eq(index).css("background-color", settings.unhighlightColor); 
index--; 
} else { 
index = autoNodes.length - 1; 
} 
if (index == -1) { 
index = autoNodes.length - 1; 
} 
autoNodes.eq(index).css("background-color", settings.highlightColor); 
} else {//向下 
if (index != -1) { 
autoNodes.eq(index).css("background-color", settings.unhighlightColor); 
} 
index++; 
if (index == autoNodes.length) { 
index = 0; 
} 
autoNodes.eq(index).css("background-color", settings.highlightColor); 
} 
} else if (kc == keys.PAGEUP || kc == keys.PAGEDOWN) { 
event.preventDefault(); 
if (kc == keys.PAGEUP) { 
if (index != -1) { 
autoNodes.eq(index).css("background-color", settings.unhighlightColor); 
} 
if (autoNodes.length > 0) { 
index = 0; 
autoNodes.eq(0).css("background-color", settings.highlightColor); 
} 
} else { 
if (index != -1) { 
autoNodes.eq(index).css("background-color", settings.unhighlightColor); 
} 
index = autoNodes.length - 1; 
autoNodes.eq(index).css("background-color", settings.highlightColor); 
} 
} else if (kc == keys.ENTER) { 
//回车键 
//有高亮内容就补全信息 
if (index != -1) { 
$this.val(autoNodes.eq(index).text()); 
} else {//没有就隐藏 
$("body").append($("<div/>").text("文本框中的【" + $this.val() + "】被提交了!")); 
$this.get(0).blur(); 
} 
autoTip.hide(); 
index = -1; 
} else if (kc == keys.ESC) { 
autoTip.hide(); 
} 
} 
}); 
})(jQuery);

现在来分析上面的autocomplate插件的一些常用选项:
index就是选择提示选项高亮的索引;
timeId是当用户在文本域输入时,利用setTimeout进行ajax请求服务器获得数据的而返回的时间;
cssOptions是自动提示选项的样式,这里给出了一些默认的样式;
var defaults = { 
width: "auto",//默认或自动设置宽度 
highlightColor: "#3399FE",//高亮时的颜色 
unhighlightColor: "#FFFFFF",//非高亮时的颜色 
css: cssOptions, 
dataType: "xml",//ajax请求返回数据类型 
paramName: "word",//ajax请求的参数名称,如果你有设置文本域的id,那么就使用这个属性 
delay: 500,//当文本域在不停的输入时,ajax多久请求一次服务器 
};

keys就是键盘键对应的值;
autocomplete就是调用的函数,可以在里面设置ajax请求的url,以及配置上面defaults中出现的参数,这个方法返回的是文本域的值;
autoTipTemplate就是输入时显示的提示框、提示菜单,返回的是一个jquery对象;
select是选择提示菜单也就是下来提示菜单的高亮选项,target当然是目标对象了,index是即将被高亮的选项的索引,settings就是
高亮的颜色配置,这个在默认defaults中就有的。是通过$.extend方法将defaults对象的属性赋值给settings对象的;
keyOperator是针对文本域的键盘操作,这个是核心函数;操作提示、自动补全就靠它了;
下面看看html代码,看看是如何调用autocomplate插件的:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>Ajax示例,实现Google搜索补全功能</title> 
<meta http-equiv="author" content="hoojo"> 
<meta http-equiv="email" content="hoojo_@126.com"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" src="jslib/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="jslib/jquery.autocomplete-1.2.js"></script> 
<script type="text/javascript"> 
$(function () { 
$(":text").autocomplete("AutocomplataWordServlet", {dataType: "xml", width: "auto"}); 
}); 
</script> 
</head> 
<body> 
请输入:<input type="text" /> 
<input type="button" value="Go" /><br/><br/> 
</body> 
</html>

看看这段代码AutocomplataWordServlet是请求的Servlet,dataType是ajax请求服务器端的返回数据的类型,width可以设置自动提示菜单的宽度。
怎么样,用法比较简单吧。当然后面你还可以加其他的配置,如:
代码片段
$(":text").autocomplete("AutocomplataWordServlet", { 
width: "auto", 
highlightColor: "#3355FE", 
unhighlightColor: "#FFFFcc", 
css: {border: "2px solid red"}, 
dataType: "xml", 
paramName: "keyWord", 
delay: 300 
});

这样也是可以的;
看看AutocomplataWordServlet的代码:
package com.hoo.servlet; 
import java.io.IOException; 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
@SuppressWarnings("serial") 
public class AutocomplataWordServlet extends HttpServlet { 
public void doGet(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
String word = request.getParameter("word"); 
request.setAttribute("word", word); 
//System.out.println(word); 
request.getRequestDispatcher("word.jsp").forward(request, response); 
} 
public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
doGet(request, response); 
} 
}

没什么可说的,就是获取客户端文本域的ajax请求的关键字,然后在jsp页面中进行单词过滤。不过你也可以在客户端用正则
或是在服务器端用正则过滤都是可以的。
下面看看word.jsp的内容:
<%@ page language="java" contentType="text/xml; charset=UTF-8" %> 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<words> 
<c:if test="${fn:startsWith('abstruct', word)}"> 
<word>abstruct</word> 
</c:if> 
<c:if test="${fn:startsWith('anilazine', word)}"> 
<word>anilazine</word> 
</c:if> 
<c:if test="${fn:startsWith('appeared', word)}"> 
<word>appeared</word> 
</c:if> 
<c:if test="${fn:startsWith('autocytolysis', word)}"> 
<word>autocytolysis</word> 
</c:if> 
<c:if test="${fn:startsWith('apple', word)}"> 
<word>apple</word> 
</c:if> 
<c:if test="${fn:startsWith('boolean', word)}"> 
<word>boolean</word> 
</c:if> 
<c:if test="${fn:startsWith('break', word)}"> 
<word>break</word> 
</c:if> 
<c:if test="${fn:startsWith('bird', word)}"> 
<word>bird</word> 
</c:if> 
<c:if test="${fn:startsWith('blur', word)}"> 
<word>blur</word> 
</c:if> 
<c:if test="${fn:startsWith('call', word)}"> 
<word>call</word> 
</c:if> 
<c:if test="${fn:startsWith('class', word)}"> 
<word>class</word> 
</c:if> 
<c:if test="${fn:startsWith('card', word)}"> 
<word>card</word> 
</c:if> 
<c:if test="${fn:startsWith('dacnomania', word)}"> 
<word>dacnomania</word> 
</c:if> 
<c:if test="${fn:startsWith('document', word)}"> 
<word>document</word> 
</c:if> 
</words>

就是一个xml格式的文档,通过使用jstl表达式,用startsWith函数匹配,如果通过就显得在xml内容中,还有看到上面的contentType="text/xml; charset=UTF-8"了没有,是text/xml哦!这点要注意,如果不设置有的浏览器就不能解析了。
作者:hoojo
blog:http://blog.csdn.net/IBM_hoojo
Javascript 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
微信小程序select下拉框实现源码
Nov 08 Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 Javascript
vue+iview实现手机号分段输入框
Mar 25 Vue.js
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 #Javascript
基于jquery的获取浏览器窗口大小的代码
Mar 28 #Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 #Javascript
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 #Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 #Javascript
基于jquery的3d效果实现代码
Mar 23 #Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 #Javascript
You might like
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
php中session与cookie的比较
2015/01/27 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
AngularJS手动表单验证
2016/02/01 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
Python随机生成彩票号码的方法
2015/03/05 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
python如何对实例属性进行类型检查
2018/03/20 Python
python hook监听事件详解
2018/10/25 Python
对Python w和w+权限的区别详解
2019/01/23 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
python numpy中cumsum的用法详解
2019/10/17 Python
Python socket聊天脚本代码实例
2020/01/02 Python
Python 创建守护进程的示例
2020/09/29 Python
python 装饰器的使用示例
2020/10/10 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
如何利用find命令查找文件
2015/02/07 面试题
为什么要做架构设计
2015/07/08 面试题
2015年班级元旦晚会活动总结
2014/11/28 职场文书
团员年度个人总结
2015/02/26 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
oracle索引总结
2021/09/25 Oracle