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

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

代码片段
$(":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哦!这点要注意,如果不设置有的浏览器就不能解析了。





本文转自hoojo博客园博客,原文链接:http://www.cnblogs.com/hoojo/archive/2011/03/28/1997608.html,如需转载请自行联系原作者
目录
相关文章
|
8天前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
24 1
|
8天前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
8天前
|
JavaScript UED
jQuery Autocomplete
jQuery Autocomplete 是一个基于 jQuery 的插件,它为输入框或文本区域提供了自动完成功能。当用户在输入框中输入文本时,Autocomplete 可以根据用户输入的文本自动匹配并显示相关建议的选项。用户可以从中选择一个选项,而不需要手动输入完整的单词
24 2
|
8天前
|
JavaScript 数据可视化 前端开发
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
22 0
|
8天前
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
31 0
|
8天前
|
JavaScript 前端开发 安全
jQuery 第十一章(表单验证插件推荐)
jQuery 第十一章(表单验证插件推荐)
62 1
|
6月前
|
JavaScript
jQuery年月日(年龄)选择插件
jQuery年月日(年龄)选择插件
31 0
|
6月前
|
前端开发 JavaScript
Jquery前端分页插件pagination同步加载和异步加载
Jquery前端分页插件pagination同步加载和异步加载
51 0
|
移动开发 JavaScript HTML5
jQuery工具提示插件tooltip.js 使用教程
jQuery工具提示插件tooltip.js 使用教程
|
JavaScript 前端开发
精心挑选的12款优秀 jQuery 手风琴效果插件和教程
  当你想在有限的页面空间内展示多个内容片段的时候,手风琴(Accordion)效果就显得非常有用,它可以帮助你以对用户非常友好的方式实现多个内容片段之间的切换。借助流行的 jQuery 框架,只需很少的代码就可以实现精美的手风琴效果,帮助你的网站吸引更多用户的眼球。
1237 0