jQuery autocomplete 自扩展插件、自动补全示例

jquery-lib版本是 1.3.2的，该插件是简单的扩展插件，代码也比较简单的封装。所以看起来也比较简单不是很费力，当然封装得也不是很好。

不过做了浏览器方面的兼容，经测试兼容IE6+、Firefox3.5+

首先看看autocomplete.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);

现在来分析上面的autocomplete插件的一些常用选项：
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代码，看看是如何调用autocomplete插件的：

<!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="[email protected]">
<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("AutocompleteWordServlet", {dataType: "xml", width: "auto"});
});
</script>
</head>

<body>
请输入：<input type="text" />
<input type="button" value="Go" /><br/><br/>
</body>
</html>

看看这段代码AutocompleteWordServlet是请求的Servlet，dataType是ajax请求服务器端的返回数据的类型，width可以设置自动提示菜单的宽度。

怎么样，用法比较简单吧。当然后面你还可以加其他的配置，如：

代码片段

$(":text").autocomplete("AutocompleteWordServlet", {
width: "auto",
highlightColor: "#3355FE",
unhighlightColor: "#FFFFcc",
css: {border: "2px solid red"},
dataType: "xml",
paramName: "keyWord",
delay: 300
});

这样也是可以的；

看看AutocompleteWordServlet的代码：

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 AutocompleteWordServlet 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哦！这点要注意，如果不设置有的浏览器就不能解析了。