仿百度搜索提示框jQuery自动完成
大概要实现的内容
这是一个很简单的示例，服务器端只是用了一个jsp页面，返回的类型为xml。先讲下是怎么回事，就是在浏览器端，通过ajax请求，发送一串英文字母，服务器端通过比较，返回具有相同前缀的英文单词。就这么个意思。
工程是在IntelliJ IDE中完成的。做前端开发感觉用IntelliJ比较方便，因为对于写javascript的话，有函数名的提示。
本例提供下载。望各位提出宝贵意见哈。
一、客户端JSP页面
<%--
Created by IntelliJ IDEA.
User: JayChang
Date: 2010-11-22
Time: 8:33:11
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>AutoComplete-Sample</title>
<link type="text/css" rel="stylesheet" href="./css/default.css">
<script type="text/javascript" src="./jslib/jquery-1.4.2.js"></script>
<script type="text/javascript" language="javascript">
//高亮的索引
var highLightIndex = -1;
//超时的标识（对用户连续快速按下键盘的事件做延时处理，只对用户在500ms内最后一次请求，让其生效）
var timeoutId;
$(document).ready(function(){
init();
$('#auto_txt').bind('keyup',processKeyup);
});
/**
* 处理键盘按下后弹起的事件
* @param event
*/
function processKeyup(event){
var myEvent = event || windows.event;
var keyCode = myEvent.keyCode;
//输入是字母，或者退格键则需要重新请求
if((keyCode >= 65 && keyCode <= 90) || keyCode == 8){
//以下两行代码是为了防止用户快速输入导致频繁请求服务器
//这样便可以在用户500ms内快速输入的情况下，只请求服务器一次
//大大提高服务器性能
highLightIndex = -1;
clearTimeout(timeoutId);
timeoutId = setTimeout(processAjaxRequest,500);
//处理上下键(up,down)
}else if(keyCode == 38 || keyCode == 40){
processKeyUpAndDown(keyCode);
//按下了回车键
}else if(keyCode == 13){
processEnter();
}
}
/***
* 初始化弹出框列表的位置，大小
*/
function init(){
$('#auto_div').hide();
var pos = $('#auto_txt').position();
var topPosition = pos.top+$('#auto_txt').height()+7;
var leftPosition = pos.left;
$('#auto_div').offset({top:topPosition,left:leftPosition});
$('#auto_div').width($('#auto_txt').width());
//$('#auto_div').css('position','absolute');
}
/**
* 处理Ajax请求
* @param data
*/
function processAjaxRequest(){
$.ajax({
type:"post", //http请求方法,默认:"post"
url:"data.jsp", //发送请求的地址
data:"reqWord="+$('#auto_txt').val(),
dataType:"xml", //预期服务器返回的数据类型
success:processAjaxResponse
});
}
/**
* 处理Ajax回复
* @param data Ajax请求得到的返回结果为dom文档对象
*/
function processAjaxResponse(data){
$('#auto_div').html('').show();
var xml = $(data);
var words = xml.find('word');
for(var i = 0 ; i < words.length ; i ++){
var word_div = $('<div></div>');
word_div.html(words.eq(i).text());
word_div.hover(fnOver,fnOut);
word_div.click(getAutoText);
$('#auto_div').append(word_div);
}
}
/**
* 处理鼠标滑过
*/
function fnOver(){
//alert($(this));
changeToWhite();
$(this).css('background-color','pink');
//alert($(this).index());
highLightIndex = $(this).index();
//下面一行注释掉了，百度搜索也没这功能，就是鼠标移动时，跟着改变搜索框的内容
//$('#auto_txt').val($('#auto_div').children().eq(highLightIndex).html());
}
/**
* 处理鼠标移除
*/
function fnOut(){
$(this).css('background-color','white');
}
/**
* 得到自动填充文本
*/
function getAutoText(){
//有高亮显示的则选中当前选中当前高亮的文本
if(highLightIndex != -1){
$('#auto_txt').val($(this).html());
$('#auto_div').html('').hide();
}
}
/**
* 处理按下Enter键
* @param keyCode
*/
function processEnter(){
if(highLightIndex != -1){
$('auto_txt').val($('#auto_div').children().eq(highLightIndex).html());
$('#auto_div').html('').hide();
}
}
/**
* 处理按上下键的情况
*/
function processKeyUpAndDown(keyCode){
var words = $('#auto_div').children();
var num = words.length;
if(num <= 0) return;
changeToWhite();
highLightIndex = ((keyCode != 38 ? num + 1:num - 1)+highLightIndex) % num;
words.eq(highLightIndex).css('background-color','pink');
$('#auto_txt').val(words.eq(highLightIndex).html());
}
/**
* 如果有高亮的则把高亮变白
*/
function changeToWhite(){
if(highLightIndex != -1){
$('#auto_div').children().eq(highLightIndex).css('background-color','white');
}
}
</script>
</head>
<body>
自动完成示例 <input type="text" id="auto_txt"><input type="button" value="提交">
<div style="border-width:1px;" id="auto_div"></div>
</body>
</html>
二、作为服务器端的JSP，返回的是XML
这里稍作解释，为了方便起见，在服务器端只是很简单的处理，返回有相同前缀的英文单词。没有对空格等复杂的搜索条件作处理，本例主要还是侧重于浏览器端的JavaScript。
<%--
Created by IntelliJ IDEA.
User: JayChang
Date: 2010-11-22
Time: 8:33:22
To change this template use File | Settings | File Templates.
--%>
<%@page contentType="text/xml; charset=UTF-8"%>
<%
String reqWord = request.getParameter("reqWord");
System.out.println(reqWord);
%>
<words>
<%if("absolute".startsWith(reqWord)){%>
<word>absolute</word>
<%}%>
<%if("air".startsWith(reqWord)){%>
<word>air</word>
<%}%>
<%if("apple".startsWith(reqWord)){%>
<word>apple</word>
<%}%>
<%if("amaze".startsWith(reqWord)){%>
<word>amaze</word>
<%}%>
<%if("bat".startsWith(reqWord)){%>
<word>bat</word>
<%}%>
<%if("bicycle".startsWith(reqWord)){%>
<word>bicycle</word>
<%}%>
<%if("bite".startsWith(reqWord)){%>
<word>bite</word>
<%}%>
<%if("bottle".startsWith(reqWord)){%>
<word>bottle</word>
<%}%>
<%if("cat".startsWith(reqWord)){%>
<word>cat</word>
<%}%>
<%if("carry".startsWith(reqWord)){%>
<word>carry</word>
<%}%>
<%if("castle".startsWith(reqWord)){%>
<word>castle</word>
<%}%>
</words>
三、CSS样式
#auto_div{
position:absolute;
border-width:1px;
border:1px #808080 solid;
}