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

yiheng

浏览: 156616 次

最近访客更多访客>>

q4444tita

fangzhuplay

li276423525

fcuppvtkd

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2012-08 ( 45)
2012-07 ( 36)
2012-06 ( 23)
更多存档...

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

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

首先看看autocomplete.js:


<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->;(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插件的：


<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><!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("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可以设置自动提示菜单的宽度。

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

代码片段


<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

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

这样也是可以的；

看看AutocompleteWordServlet的代码：


<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->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的内容：


<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><%@ 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>