大概要实现的内容
这是一个很简单的示例,服务器端只是用了一个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;
- }