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>

$(function () {

$(":text").autocomplete("AutocomplataWordServlet", {dataType: "xml", width: "auto"});

});

</script>

</head>

<body>

请输入：<input type="text" />

</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)}">

</c:if>

<c:if test="${fn:startsWith('blur', word)}">

</c:if>

<c:if test="${fn:startsWith('call', word)}">

</c:if>

<c:if test="${fn:startsWith('class', word)}">

<word>class</word>

</c:if>

<c:if test="${fn:startsWith('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