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

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

    首先看看autocomplete.js:

    1.       ;(function ($) {
    2.     var index = -1;
    3.     var timeId;
    5.     var cssOptions = {
    6.         "border": "1px solid black",
    7.         "background-color": "white",
    8.         "position": "absolute"/*,
    9.         "font": "normal normal lighter 14px 6px Times New Roman"*/
    10.     };
    12.     var defaults = {
    13.         width: "auto",
    14.         highlightColor: "#3399FE",
    15.         unhighlightColor: "#FFFFFF",
    16.         css: cssOptions,
    17.         dataType: "xml",
    18.         paramName: "word",
    19.         delay: 500,
    20.         max: 20
    21.     };
    23.     var keys = {
    24.         UP: 38,
    25.         DOWN: 40,
    26.         DEL: 46,
    27.         TAB: 9,
    28.         ENTER: 13,
    29.         ESC: 27,
    30.         /*COMMA: 188,*/
    31.         PAGEUP: 33,
    32.         PAGEDOWN: 34,
    33.         BACKSPACE: 8,
    34.         A: 65,
    35.         Z: 90
    36.     };
    38.     $.fn.extend({
    39.         autocomplete: function (sUrl, settings) {
    41.             sUrl = (typeof sUrl === "string") ? sUrl : "";
    42.             var param = !this.attr("id") ? defaults.paramName : this.attr("id"); 
    44.             settings = $.extend({}, defaults, {url: sUrl, paramName: param}, settings);
    45.             var autoTip = this.autoTipTemplate(this, settings);
    46.             $("body").append(autoTip);
    47.             var $this = this;
    48.             this.keyup(function (event) {
    49.                 $this.keyOperator(event, autoTip, settings);
    50.             });
    51.             /*$("input[type=button]").click(function () {
    52.                 $("#result").text("文本框中的【" + search.val() + "】被提交了！");
    53.                 $("#auto").hide();
    54.                 index = - 1;
    55.             });*/
    56.             return this.each(function () {
    57.                 $this.val();
    58.             });
    59.         },
    60.         autoTipTemplate: function (input, settings) {
    61.             var inputOffset = input.offset();
    63.             var autoTip = $("<div/>").css(settings.css).hide()
    64.             .css("top", inputOffset.top + input.height() + 5 + "px")
    65.             .css("left", inputOffset.left + "px");
    67.             var space = $.browser.mozilla ? 2 : 6;//兼容浏览器
    68.             var tipWidth = (typeof settings.width === "string" && "auto") ? input.width() : settings.width;
    69.             autoTip.width(tipWidth + space + "px");
    71.             return autoTip;
    72.         },
    73.         select: function (target, index, settings, flag) {
    74.             var color = flag ? settings.highlightColor : settings.unhighlightColor;
    75.             target.children("div").eq(index).css("background-color", color);
    76.         },
    77.         keyOperator: function (event, autoTip, settings) {
    78.             var evt = event || window.event;
    79.             var autoNodes = autoTip.children("div");
    81.             var kc = evt.keyCode;
    82.             var $this = this;
    84.             /* 当用户按下字母或是delete 或是退格键*/
    85.             if (kc >= keys.A && kc <= keys.Z || kc == keys.BACKSPACE || kc == keys.DEL) {
    86.                 var wordText = this.val();
    87.                 if (wordText.length != 0) {
    88.                     var param = {};
    89.                     param[settings.paramName] = wordText;
    91.                     clearTimeout(timeId);
    92.                     timeId = setTimeout(function () {
    93.                         $.post(settings.url, param, function (data) {
    94.                             var wordObj = $(data);
    95.                             if (settings.dataType == "xml") {
    96.                                 var wordNodes = wordObj.find("word");
    97.                                 autoTip.html("");
    98.                                 wordNodes.each(function (i) {
    99.                                     var divNode = $("<div>").attr("id", i);
    100.                                     //将遍历的单词加入到创建的div中，然后把该div追加到auto中
    101.                                     divNode.html($(this).text()).appendTo(autoTip);
    102.                                     //鼠标已进去，添加高亮
    103.                                     divNode.mousemove(function () {
    104.                                         //如果已经存在高亮，去掉高亮改为白色
    105.                                         if (index != -1) {
    106.                                             autoTip.children("div").eq(index).css("background-color", settings.unhighlightColor);
    107.                                         } 
    108.                                         index = $(this).attr("id");
    109.                                         $(this).css("background-color", settings.highlightColor);
    110.                                     });
    111.                                     //鼠标移出,取消高亮
    112.                                     divNode.mouseout(function () {
    113.                                         $(this).css("background-color", settings.unhighlightColor);
    114.                                     });
    115.                                     //点击高亮内容
    116.                                     divNode.click(function () {
    117.                                         $this.val($(this).text());
    118.                                         index = -1;
    119.                                         autoTip.hide();
    120.                                     });
    121.                                 });
    123.                                 if (wordNodes.length > 0) {
    124.                                     autoTip.show();
    125.                                 } else {
    126.                                     autoTip.hide();
    127.                                     index = -1;
    128.                                 }
    129.                             }
    130.                         });
    131.                     }, settings.delay);
    132.                 } else {
    133.                     autoTip.hide();
    134.                     index = -1;
    135.                 }
    136.             } else if (kc == keys.UP || kc == keys.DOWN) {/*当用户按下上下键*/
    137.                  if (kc == keys.UP) {//向上
    138.                      if (index != -1) {
    139.                          autoNodes.eq(index).css("background-color", settings.unhighlightColor);
    140.                          index--;
    141.                      } else {
    142.                          index = autoNodes.length - 1;
    143.                      }
    144.                      if (index == -1) {
    145.                          index = autoNodes.length - 1;
    146.                      }
    147.                      autoNodes.eq(index).css("background-color", settings.highlightColor);
    148.                  } else {//向下
    149.                      if (index != -1) {
    150.                          autoNodes.eq(index).css("background-color", settings.unhighlightColor);
    151.                      }
    152.                      index++;
    153.                      if (index == autoNodes.length) {
    154.                          index = 0;
    155.                      }
    156.                      autoNodes.eq(index).css("background-color", settings.highlightColor);
    157.                  }            
    158.             } else if (kc == keys.PAGEUP || kc == keys.PAGEDOWN) {
    159.                 event.preventDefault();
    160.                  if (kc == keys.PAGEUP) {
    161.                      if (index != -1) {
    162.                          autoNodes.eq(index).css("background-color", settings.unhighlightColor);
    163.                      } 
    164.                      if (autoNodes.length > 0) {
    165.                          index = 0;
    166.                          autoNodes.eq(0).css("background-color", settings.highlightColor);
    167.                      }
    168.                  } else {
    169.                      if (index != -1) {
    170.                          autoNodes.eq(index).css("background-color", settings.unhighlightColor);
    171.                      }
    172.                      index = autoNodes.length - 1;                         
    173.                      autoNodes.eq(index).css("background-color", settings.highlightColor);
    174.                  }            
    175.             } else if (kc == keys.ENTER) {
    176.                 //回车键            
    177.                 //有高亮内容就补全信息
    178.                 if (index != -1) {
    179.                     $this.val(autoNodes.eq(index).text());
    180.                 } else {//没有就隐藏
    181.                     $("body").append($("<div/>").text("文本框中的【" + $this.val() + "】被提交了！"));
    182.                     $this.get(0).blur();
    183.                 }
    184.                 autoTip.hide();
    185.                 index = -1;
    186.             } else if (kc == keys.ESC) {
    187.                 autoTip.hide();
    188.             }
    189.         }
    190.     });
    191. })(jQuery);
    192.

    现在来分析上面的autocomplete插件的一些常用选项：

    index就是选择提示选项高亮的索引；

    timeId是当用户在文本域输入时，利用setTimeout进行ajax请求服务器获得数据的而返回的时间；

    cssOptions是自动提示选项的样式，这里给出了一些默认的样式； 

    1.       var defaults = {  
    2.         width: "auto",//默认或自动设置宽度  
    3.         highlightColor: "#3399FE",//高亮时的颜色  
    4.         unhighlightColor: "#FFFFFF",//非高亮时的颜色  
    5.         css: cssOptions,  
    6.         dataType: "xml",//ajax请求返回数据类型  
    7.         paramName: "word",//ajax请求的参数名称，如果你有设置文本域的id，那么就使用这个属性  
    8.         delay: 500,//当文本域在不停的输入时，ajax多久请求一次服务器  
    9.     };   
    10.

    keys就是键盘键对应的值；

    autocomplete就是调用的函数，可以在里面设置ajax请求的url，以及配置上面defaults中出现的参数，这个方法返回的是文本域的值；

    autoTipTemplate就是输入时显示的提示框、提示菜单，返回的是一个jquery对象；

    select是选择提示菜单也就是下来提示菜单的高亮选项，target当然是目标对象了，index是即将被高亮的选项的索引，settings就是

    高亮的颜色配置，这个在默认defaults中就有的。是通过$.extend方法将defaults对象的属性赋值给settings对象的；

    keyOperator是针对文本域的键盘操作，这个是核心函数；操作提示、自动补全就靠它了；

    下面看看html代码，看看是如何调用autocomplete插件的：

    1.       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    2. <html>
    3.   <head>
    4.     <title>Ajax示例，实现Google搜索补全功能</title>
    6.     <meta http-equiv="author" content="hoojo">
    7.     <meta http-equiv="email" content="hoojo_@126.com">
    8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    9.     <script type="text/javascript" src="jslib/jquery-1.3.2.min.js"></script>
    10.     <script type="text/javascript" src="jslib/jquery.autocomplete-1.2.js"></script>
    11.     <script type="text/javascript">
    12.         $(function () {
    13.             $(":text").autocomplete("AutocompleteWordServlet", {dataType: "xml", width: "auto"});
    14.         });
    15.     </script>
    16.   </head>
    18.   <body>
    19.        请输入：<input type="text" />
    20.        <input type="button" value="Go" /><br/><br/>
    21.   </body>
    22. </html>
    23.

    看看这段代码AutocompleteWordServlet是请求的Servlet，dataType是ajax请求服务器端的返回数据的类型，width可以设置自动提示菜单的宽度。

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

    代码片段

    1.       $(":text").autocomplete("AutocompleteWordServlet", {
    2.                 width: "auto",
    3.                 highlightColor: "#3355FE",
    4.                 unhighlightColor: "#FFFFcc",
    5.                 css: {border: "2px solid red"},
    6.                 dataType: "xml",
    7.                 paramName: "keyWord",
    8.                 delay: 300
    9.             });
    10.

    这样也是可以的；

    看看AutocompleteWordServlet的代码： 

    1.       package com.hoo.servlet;
    3. import java.io.IOException;
    4. import javax.servlet.ServletException;
    5. import javax.servlet.http.HttpServlet;
    6. import javax.servlet.http.HttpServletRequest;
    7. import javax.servlet.http.HttpServletResponse;
    9. @SuppressWarnings("serial")
    10. public class AutocompleteWordServlet extends HttpServlet {
    11.     public void doGet(HttpServletRequest request, HttpServletResponse response)
    12.             throws ServletException, IOException {
    14.         String word = request.getParameter("word");
    15.         request.setAttribute("word", word);
    16.         //System.out.println(word);
    17.         request.getRequestDispatcher("word.jsp").forward(request, response);
    18.     }
    20.     public void doPost(HttpServletRequest request, HttpServletResponse response)
    21.             throws ServletException, IOException {
    22.         doGet(request, response);
    23.     }
    24. }
    25.

    没什么可说的，就是获取客户端文本域的ajax请求的关键字，然后在jsp页面中进行单词过滤。不过你也可以在客户端用正则

    或是在服务器端用正则过滤都是可以的。

    下面看看word.jsp的内容：

    1.       <%@ page language="java" contentType="text/xml; charset=UTF-8" %>
    2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    3. <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
    5. <words>
    6.     <c:if test="${fn:startsWith('abstruct', word)}">
    7.         <word>abstruct</word>
    8.     </c:if>
    9.     <c:if test="${fn:startsWith('anilazine', word)}">
    10.         <word>anilazine</word>
    11.     </c:if>
    12.     <c:if test="${fn:startsWith('appeared', word)}">
    13.         <word>appeared</word>
    14.     </c:if>
    15.     <c:if test="${fn:startsWith('autocytolysis', word)}">
    16.         <word>autocytolysis</word>
    17.     </c:if>
    18.     <c:if test="${fn:startsWith('apple', word)}">
    19.         <word>apple</word>
    20.     </c:if>
    21.     <c:if test="${fn:startsWith('boolean', word)}">
    22.         <word>boolean</word>
    23.     </c:if>
    24.     <c:if test="${fn:startsWith('break', word)}">
    25.         <word>break</word>
    26.     </c:if>
    27.     <c:if test="${fn:startsWith('bird', word)}">
    28.         <word>bird</word>
    29.     </c:if>
    30.     <c:if test="${fn:startsWith('blur', word)}">
    31.         <word>blur</word>
    32.     </c:if>
    33.     <c:if test="${fn:startsWith('call', word)}">
    34.         <word>call</word>
    35.     </c:if>
    36.     <c:if test="${fn:startsWith('class', word)}">
    37.         <word>class</word>
    38.     </c:if>
    39.     <c:if test="${fn:startsWith('card', word)}">
    40.         <word>card</word>
    41.     </c:if>
    42.     <c:if test="${fn:startsWith('dacnomania', word)}">
    43.         <word>dacnomania</word>
    44.     </c:if>
    45.     <c:if test="${fn:startsWith('document', word)}">
    46.         <word>document</word>
    47.     </c:if>
    48. </words>
    49.

    就是一个xml格式的文档，通过使用jstl表达式，用startsWith函数匹配，如果通过就显得在xml内容中，还有看到上面的contentType="text/xml; charset=UTF-8"了没有，是text/xml哦！这点要注意，如果不设置有的浏览器就不能解析了。