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 相关文章推荐
Prototype中dom对象方法汇总
Sep 17 Javascript
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
js 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
JavaScript实现彩虹文字效果的方法
Apr 16 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
jquery.pagination.js分页使用教程
Oct 23 jQuery
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
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打造属于自己的MVC框架
2012/03/07 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
WordPress网站性能优化指南
2015/11/18 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
js实现登录验证码
2016/12/22 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
Python基础之getpass模块详细介绍
2017/08/10 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
python中模块的__all__属性详解
2017/10/26 Python
python实现SOM算法
2018/02/23 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
文秘自荐信
2013/10/20 职场文书
军训自我鉴定范文
2014/02/13 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
家长学校培训材料
2014/08/20 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
Python实现文字pdf转换图片pdf效果
2022/04/03 Python
python内置模块之上下文管理contextlib
2022/06/14 Python