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

215 阅读 0 评论 142 点赞

我是靠谱客的博主自觉咖啡豆，最近开发中收集的这篇文章主要介绍jQuery autocomplate 自扩展插件、自动完成示例代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
不过做了浏览器方面的兼容，经测试兼容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