仿百度搜索提示框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; } ??
?