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

教程首页更多教程