jQuery autocomplete 自擴展插件、自動補全示例 · Ajax 專欄

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哦！這點要注意，如果不設置有的瀏覽器就不能解析了。