原文地址：[url=http://www.jb51.net/article/28075.htm]http://www.jb51.net/article/28075.htm[/url]
原文的代码格式及注释超赞！！！
-------------------------------------------------------
我主要修复了几个小bug:
修复了：下拉框宽度无法控制的bug;
修复了：改变调用方式后，焦点改变一次重复生成一次隐藏div 的bug;
修复了：ajax 请求jsp中文乱码，让其可以支持中文。
1、html页面代码
2、jsp页面，主要返回json ,你可以用任何你知道的语言。
后记：从中学习了不少东西，jquery很好用啊。。。。这个值得深入研究。。。
原文的代码格式及注释超赞！！！
-------------------------------------------------------
我主要修复了几个小bug:
修复了：下拉框宽度无法控制的bug;
修复了：改变调用方式后，焦点改变一次重复生成一次隐藏div 的bug;
修复了：ajax 请求jsp中文乱码，让其可以支持中文。
1、html页面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>搜索词自动完成</title>
<style type="text/css">
.autocomplete{
border: 1px solid #9ACCFB;
background-color: white;
text-align: left;
}
.autocomplete li{
list-style-type: none;
}
.clickable {
cursor: default;
}
.highlight {
background-color: #9ACCFB;
}
</style>
<script type="text/javascript" src="./javascript/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
function autoComplete(e,datas){
//取得输入框JQuery对象
var $searchInput = $('#'+e);
//关闭浏览器提供给输入框的自动完成
$searchInput.attr('autocomplete','off');
//将多余的模拟的div干掉。
if($(".autocomplete").size()>0){
$(".autocomplete").detach();
}
//创建自动完成的下拉列表，用于显示服务器返回的数据,插入在搜索按钮的后面，等显示的时候再调整位置
var $autocomplete = $('<div class="autocomplete"></div>').hide().insertAfter('#'+e);
//清空下拉列表的内容并且隐藏下拉列表区
var clear = function(){
$autocomplete.empty().hide();
};
//注册事件，当输入框失去焦点的时候清空下拉列表并隐藏
$searchInput.blur(function(){
setTimeout(clear,200);
});
//下拉列表中高亮的项目的索引，当显示下拉列表项的时候，移动鼠标或者键盘的上下键就会移动高亮的项目，想百度搜索那样
var selectedItem = null;
//timeout的ID
var timeoutid = null;
//设置下拉项的高亮背景
var setSelectedItem = function(item){
//更新索引变量
selectedItem = item ;
//按上下键是循环显示的，小于0就置成最大的值，大于最大值就置成0
if(selectedItem < 0){
selectedItem = $autocomplete.find('li').length - 1;
}else if(selectedItem > $autocomplete.find('li').length-1 ) {
selectedItem = 0;
}
//首先移除其他列表项的高亮背景，然后再高亮当前索引的背景
$autocomplete.find('li').removeClass('highlight').eq(selectedItem).addClass('highlight');
};
var ajax_request = function(){
//ajax服务端通信
$.ajax({
'url':'./returnJson.jsp', //服务器的地址 {如果不在同一个项目也可以：全路径http://ip:端口号/returnJson.jsp}
'data':{'search-text':$searchInput.val()}, //参数
'dataType':'json', //返回数据类型
'type':'POST', //请求类型
'success':function(data){
//var data=eval("(" +data+ ")");
if($(data).size()>0) {
//遍历data，添加到自动完成区
$.each(data, function(index,term) {
//创建li标签,添加到下拉列表中
$('<li></li>').text(term).appendTo($autocomplete).addClass('clickable').hover(function(){
//下拉列表每一项的事件，鼠标移进去的操作
$(this).siblings().removeClass('highlight');
$(this).addClass('highlight');
selectedItem = index;
},function(){
//下拉列表每一项的事件，鼠标离开的操作
$(this).removeClass('highlight');
//当鼠标离开时索引置-1，当作标记
selectedItem = -1;
}).click(function(){
//鼠标单击下拉列表的这一项的话，就将这一项的值添加到输入框中
$searchInput.val(term);
//清空并隐藏下拉列表
$autocomplete.empty().hide();
});
});//事件注册完毕
//设置下拉列表的位置，然后显示下拉列表
var ypos = $searchInput.position().top;
var xpos = $searchInput.position().left;
//alert("下拉列表原点坐标：("+xpos+","+ypos+")");
$autocomplete.width($searchInput.width()); //$searchInput.css('width')
$autocomplete.css({'position':'relative','left':xpos + "px",'top':ypos +"px"});
setSelectedItem(0);
//显示下拉列表
$autocomplete.show();
}
}
});
};
//对输入框进行事件注册
$searchInput.keyup(function(event) {
//字母数字，退格，空格
if(event.keyCode > 40 || event.keyCode == 8 || event.keyCode ==32) {
//首先删除下拉列表中的信息
$autocomplete.empty().hide();
clearTimeout(timeoutid);
timeoutid = setTimeout(ajax_request,100);
}else if(event.keyCode == 38){ //上
//selectedItem = -1 代表鼠标离开
if(selectedItem == -1){
setSelectedItem($autocomplete.find('li').length-1);
}else {
//索引减1
setSelectedItem(selectedItem - 1);
}
event.preventDefault();
}else if(event.keyCode == 40) { //下
//selectedItem = -1 代表鼠标离开
if(selectedItem == -1){
setSelectedItem(0);
}else {
setSelectedItem(selectedItem + 1); //索引加1
}
event.preventDefault();
}
}).keypress(function(event){
if(event.keyCode == 13) { //enter键
//列表为空或者鼠标离开导致当前没有索引值
if($autocomplete.find('li').length == 0 || selectedItem == -1) {
return;
}
$searchInput.val($autocomplete.find('li').eq(selectedItem).text());
$autocomplete.empty().hide();
event.preventDefault();
}
}).keydown(function(event){
if(event.keyCode == 27 ) { //esc键
$autocomplete.empty().hide();
event.preventDefault();
}
});
//注册窗口大小改变的事件，重新调整下拉列表的位置
$(window).resize(function() {
var ypos = $searchInput.position().top;
var xpos = $searchInput.position().left;
$autocomplete.width($searchInput.width()); //$searchInput.css('width')
$autocomplete.css({'position':'relative','left':xpos-10 + "px",'top':ypos-16+"px"}); //控件下拉div的位置
});
}
</script>
</head>
<body onload="">
<label for="search-text">请输入关键词</label>
<input type="text" id="search-text" name="search-text" style="" onfocus="autoComplete('search-text','');" />
</body>
</html>
2、jsp页面，主要返回json ,你可以用任何你知道的语言。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
response.setContentType("text/xml");
response.setCharacterEncoding("utf-8");
request.setCharacterEncoding("UTF-8");
String[] words = { "a", "abc", "apple", "abstract", "an",
"bike", "byebye", "beat", "be", "bing", "come", "cup",
"class", "calendar", "china","中","中国" ,"中国人","中华人民共合国中央人民政府！","1","12","123"};
if (request.getParameter("search-text") != null) {
String key = request.getParameter("search-text");
if (key.length() != 0) {//关键字不为空，将符合条件 的拼成json 返回。
String json = "[";
for (int i = 0; i < words.length; i++) {
if (words[i].startsWith(key)) {
json += "\"" + words[i] + "\"" + ",";
}
}
json = json.substring(0, json.length() - 1 > 0 ? json
.length() - 1 : 1);
json += "]";
//System.out.println("json:" + json);
out.println(json);
}
}
%>
后记：从中学习了不少东西，jquery很好用啊。。。。这个值得深入研究。。。
74
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
