jquery-lib版本是 1.3.2的，该插件是简单的扩展插件，代码也比较简单的封装。所以看起来也比较简单不是很费力，当然封装得也不是很好。
不过做了浏览器方面的兼容，经测试兼容IE6+、Firefox3.5+
首先看看autocomplate.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);
现在来分析上面的autocomplate插件的一些常用选项：
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代码，看看是如何调用autocomplate插件的：
<!
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(
"
AutocomplataWordServlet
"
, {dataType:
"
xml
"
, width:
"
auto
"
});
});
</
script
>
</
head
>
<
body
>
请输入：
<
input
type
="text"
/>
<
input
type
="button"
value
="Go"
/><
br
/><
br
/>
</
body
>
</
html
>
看看这段代码AutocomplataWordServlet是请求的Servlet，dataType是ajax请求服务器端的返回数据的类型，width可以设置自动提示菜单的宽度。
怎么样，用法比较简单吧。当然后面你还可以加其他的配置，如：
代码片段
$(
"
:text
"
).autocomplete(
"
AutocomplataWordServlet
"
, {
width:
"
auto
"
,
highlightColor:
"
#3355FE
"
,
unhighlightColor:
"
#FFFFcc
"
,
css: {border:
"
2px solid red
"
},
dataType:
"
xml
"
,
paramName:
"
keyWord
"
,
delay:
300
});
这样也是可以的；
看看AutocomplataWordServlet的代码：
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
AutocomplataWordServlet
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哦！这点要注意，如果不设置有的浏览器就不能解析了。
分享到：
相关推荐
本示例为jquery自动补全的示例，其中包括两部分，第一是在本地构造的json格式的数据供自动补全用，第二是从后台将数据处理成json格式，jquery通过ajax请求后台的json数据，其中还有处理autocomplete不支持中文的方法...
**jQuery自动补全插件详解** jQuery 自动补全插件是一种常见的前端开发工具，它为用户在输入框中提供动态建议，提高了用户体验，尤其在处理大量数据输入时显得尤为重要。本示例将涵盖如何使用jQuery实现自动补全...
它可能是一个示例文件名，也可能代表一系列相关的文件或目录，用于存储自动补全功能的相关资源，比如样式表（CSS）、JavaScript文件、配置文件或者数据文件。 总的来说，这个项目结合了jQuery、JavaScript和可能的...
**jQuery的Autocomplete插件**是用于实现网页输入框自动补全功能的一种高效解决方案，它极大地提升了用户体验，尤其是在用户需要从大量数据中选择时。这个插件是基于jQuery库的，因此，首先需要确保在项目中引入了...
**jQuery仿百度搜索下拉框自动补全代码插件** 在网页开发中，为了提供用户友好的搜索体验，经常会使用到自动补全功能，就像百度搜索引擎那样。这种功能可以极大地提高用户输入效率，减少用户的输入错误，提升用户...
**jQuery自动补全插件详解** 在Web开发中，用户输入常常是交互体验的重要环节，为了提高用户体验，很多网站和应用引入了自动补全（Autocomplete）功能。jQuery作为一个广泛使用的JavaScript库，提供了丰富的插件...
"jQuery 插件demo 自动补全"是指一个使用jQuery编写的插件示例，它实现了自动补全的功能，通常在输入框中输入文字时，会根据已输入内容动态显示匹配的建议列表。这种功能常见于搜索框、地址栏等场景，提高了用户输入...
除了基本功能外，高级jQuery自动补全插件还支持多种扩展特性： 1. **异步数据源**：允许从远程API获取数据，如通过AJAX请求填充建议列表。 2. **自定义模板**：允许自定义提示项的HTML结构，以实现更丰富的展示效果...
**jQuery 实现仿搜索引擎文本框自动补全插件** 在 Web 开发中，为了提高用户体验，经常会在输入框中使用自动补全（Autocomplete）功能，就像我们在使用搜索引擎时，输入关键词后会看到下拉的建议列表。jQuery 是一...
jQuery文本框联想补全自动完成插件是一款非常实用的前端开发工具，它可以帮助开发者在网页的输入框中实现智能联想和自动补全功能。这个插件基于JavaScript库jQuery构建，因此，使用它之前需要确保项目中已经引入了...
`jQuery.autocomplete.js` 是一个流行的JavaScript库jQuery的扩展插件，主要用于实现输入框的自动补全功能。这个插件极大地增强了用户在网页上的交互体验，尤其在处理大量可选项时，用户可以通过输入部分文字快速...
jQuery百度搜索自动补全插件基于流行的JavaScript库jQuery和typeahead.js实现，为网页上的搜索框提供了高效且用户友好的自动补全功能。这个插件主要用于提升用户体验，尤其是在需要处理大量数据并希望用户能快速找到...
《jQuery仿百度搜索下拉框自动补全代码插件详解》 在网页开发中，用户交互体验至关重要，其中搜索功能的便捷性和智能性是衡量一个网站用户体验的重要指标。jQuery作为一个强大的JavaScript库，提供了丰富的功能来...
利用jquery.autocomplete.js插件实现了文本框自动补全的功能， 附件包含两个实例代码，均以txt文档显示，都有前台和后台代码。一个是传一个参数，一个是传两个参数，后台以一般处理程序ashx文件编写。大家只需要修改...
这个“自动补全插件.rar”文件包含了实现这一功能的jQuery插件及其演示示例。 jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互等任务。在自动补全插件中，jQuery的强大功能被...
本项目是基于jQuery技术实现的一个自定义的自动补全功能，旨在提供一种高效且易用的输入建议解决方案。 自动补全（Autocomplete）通常用于文本输入框，当用户在输入时，系统会根据已输入的部分文字，从预设的数据源...
jQuery的自动补全功能主要依赖于其丰富的插件生态系统，其中一个著名的插件是`jQuery UI Autocomplete`。这个插件提供了强大的功能，包括异步数据源支持、多种回调函数以及自定义模板等功能。 首先，我们需要在项目...
总结一下，JavaScript代码自动补全插件如Firebug及其扩展Firebug Autocompleter，是JavaScript开发者不可或缺的工具。它们通过智能提示和补全功能，极大地提高了开发效率，同时降低了出错概率。Firebug不仅提供基本...