jQueryautocomplete自擴充套件外掛、自動補全示例

嗯哼9925發表於2017-11-14
jQuery套件

   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) {
                //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，如需轉載請自行聯絡原作者


相關文章