大概要實現(xiàn)的內(nèi)容
????? 這是一個很簡單的示例，服務(wù)器端只是用了一個jsp頁面，返回的類型為xml。先講下是怎么回事，就是在瀏覽器端，通過ajax請求，發(fā)送一串英文字母，服務(wù)器端通過比較，返回具有相同前綴的英文單詞。就這么個意思。
????? 工程是在IntelliJ IDE中完成的。做前端開發(fā)感覺用IntelliJ比較方便，因為對于寫javascript的話，有函數(shù)名的提示。
????? 本例提供下載。望各位提出寶貴意見哈。
一、客戶端JSP頁面
Html代碼? 收藏代碼
??? <%--?
????? 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;?
???????????? //超時的標(biāo)識（對用戶連續(xù)快速按下鍵盤的事件做延時處理，只對用戶在500ms內(nèi)最后一次請求，讓其生效）?
???????????? 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 ==
{?
??????????????????????? //以下兩行代碼是為了防止用戶快速輸入導(dǎo)致頻繁請求服務(wù)器?
??????????????????????? //這樣便可以在用戶500ms內(nèi)快速輸入的情況下，只請求服務(wù)器一次?
??????????????????????? //大大提高服務(wù)器性能?
??????????????????????? 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請求方法,默認(rèn):"post"?
???????????????????? url:"data.jsp",?? //發(fā)送請求的地址?
???????????????????? data:"reqWord="+$('#auto_txt').val(),?
???????????????????? dataType:"xml",?? //預(yù)期服務(wù)器返回的數(shù)據(jù)類型?
???????????????????? success:processAjaxResponse?
????????????????? });?
???????????? }?
?????
???????????? /**?
????????????? * 處理Ajax回復(fù)?
????????????? * @param data Ajax請求得到的返回結(jié)果為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);?
???????????????? }?
???????????? }?
?????
???????????? /**?
????????????? * 處理鼠標(biāo)滑過?
????????????? */?
???????????? function fnOver(){?
???????????????? //alert($(this));?
????????????????? changeToWhite();?
????????????????? $(this).css('background-color','pink');?
????????????????? //alert($(this).index());?
????????????????? highLightIndex = $(this).index();?
????????????????? //下面一行注釋掉了，百度搜索也沒這功能，就是鼠標(biāo)移動時，跟著改變搜索框的內(nèi)容?
????????????????? //$('#auto_txt').val($('#auto_div').children().eq(highLightIndex).html());?
???????????? }?
??????????????
???????????? /**?
????????????? * 處理鼠標(biāo)移除?
????????????? */?
???????????? function fnOut(){?
???????????????? $(this).css('background-color','white');?
???????????? }?
?????
???????????? /**?
????????????? * 得到自動填充文本?
????????????? */?
???????????? function getAutoText(){?
??????????????? //有高亮顯示的則選中當(dāng)前選中當(dāng)前高亮的文本?
??????????????? 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>?
二、作為服務(wù)器端的JSP，返回的是XML
?????? 這里稍作解釋，為了方便起見，在服務(wù)器端只是很簡單的處理，返回有相同前綴的英文單詞。沒有對空格等復(fù)雜的搜索條件作處理，本例主要還是側(cè)重于瀏覽器端的JavaScript。
Html代碼? 收藏代碼
??? <%--?
????? 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樣式
Html代碼? 收藏代碼
??? #auto_div{?
??????? position:absolute;?
??????? border-width:1px;?
??????? border:1px #808080 solid;?
??? }??
【by:http://jaychang.iteye.com/blog/823893】
????? 這是一個很簡單的示例，服務(wù)器端只是用了一個jsp頁面，返回的類型為xml。先講下是怎么回事，就是在瀏覽器端，通過ajax請求，發(fā)送一串英文字母，服務(wù)器端通過比較，返回具有相同前綴的英文單詞。就這么個意思。
????? 工程是在IntelliJ IDE中完成的。做前端開發(fā)感覺用IntelliJ比較方便，因為對于寫javascript的話，有函數(shù)名的提示。
????? 本例提供下載。望各位提出寶貴意見哈。
一、客戶端JSP頁面
Html代碼? 收藏代碼
??? <%--?
????? 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;?
???????????? //超時的標(biāo)識（對用戶連續(xù)快速按下鍵盤的事件做延時處理，只對用戶在500ms內(nèi)最后一次請求，讓其生效）?
???????????? 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 ==
{?
??????????????????????? //以下兩行代碼是為了防止用戶快速輸入導(dǎo)致頻繁請求服務(wù)器?
??????????????????????? //這樣便可以在用戶500ms內(nèi)快速輸入的情況下，只請求服務(wù)器一次?
??????????????????????? //大大提高服務(wù)器性能?
??????????????????????? 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請求方法,默認(rèn):"post"?
???????????????????? url:"data.jsp",?? //發(fā)送請求的地址?
???????????????????? data:"reqWord="+$('#auto_txt').val(),?
???????????????????? dataType:"xml",?? //預(yù)期服務(wù)器返回的數(shù)據(jù)類型?
???????????????????? success:processAjaxResponse?
????????????????? });?
???????????? }?
?????
???????????? /**?
????????????? * 處理Ajax回復(fù)?
????????????? * @param data Ajax請求得到的返回結(jié)果為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);?
???????????????? }?
???????????? }?
?????
???????????? /**?
????????????? * 處理鼠標(biāo)滑過?
????????????? */?
???????????? function fnOver(){?
???????????????? //alert($(this));?
????????????????? changeToWhite();?
????????????????? $(this).css('background-color','pink');?
????????????????? //alert($(this).index());?
????????????????? highLightIndex = $(this).index();?
????????????????? //下面一行注釋掉了，百度搜索也沒這功能，就是鼠標(biāo)移動時，跟著改變搜索框的內(nèi)容?
????????????????? //$('#auto_txt').val($('#auto_div').children().eq(highLightIndex).html());?
???????????? }?
??????????????
???????????? /**?
????????????? * 處理鼠標(biāo)移除?
????????????? */?
???????????? function fnOut(){?
???????????????? $(this).css('background-color','white');?
???????????? }?
?????
???????????? /**?
????????????? * 得到自動填充文本?
????????????? */?
???????????? function getAutoText(){?
??????????????? //有高亮顯示的則選中當(dāng)前選中當(dāng)前高亮的文本?
??????????????? 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>?
二、作為服務(wù)器端的JSP，返回的是XML
?????? 這里稍作解釋，為了方便起見，在服務(wù)器端只是很簡單的處理，返回有相同前綴的英文單詞。沒有對空格等復(fù)雜的搜索條件作處理，本例主要還是側(cè)重于瀏覽器端的JavaScript。
Html代碼? 收藏代碼
??? <%--?
????? 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樣式
Html代碼? 收藏代碼
??? #auto_div{?
??????? position:absolute;?
??????? border-width:1px;?
??????? border:1px #808080 solid;?
??? }??
【by:http://jaychang.iteye.com/blog/823893】
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
