這篇文章將為大家詳細(xì)講解有關(guān)利用Ajax實(shí)現(xiàn)一個(gè)自動(dòng)補(bǔ)全功能，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
成都創(chuàng)新互聯(lián)秉承實(shí)現(xiàn)全網(wǎng)價(jià)值營(yíng)銷的理念，以專業(yè)定制企業(yè)官網(wǎng)，成都網(wǎng)站建設(shè)、網(wǎng)站制作，小程序設(shè)計(jì)，網(wǎng)頁(yè)設(shè)計(jì)制作，手機(jī)網(wǎng)站制作，營(yíng)銷型網(wǎng)站建設(shè)幫助傳統(tǒng)企業(yè)實(shí)現(xiàn)“互聯(lián)網(wǎng)+”轉(zhuǎn)型升級(jí)專業(yè)定制企業(yè)官網(wǎng),公司注重人才、技術(shù)和管理，匯聚了一批優(yōu)秀的互聯(lián)網(wǎng)技術(shù)人才,對(duì)客戶都以感恩的心態(tài)奉獻(xiàn)自己的專業(yè)和所長(zhǎng)。
如下圖：
天貓：
京東：
這時(shí)候的你是否想到如何實(shí)現(xiàn)這個(gè)功能？
我們的網(wǎng)頁(yè)明明沒有刷新，可是卻出現(xiàn)了數(shù)據(jù)的交互，也就是Ajax的強(qiáng)大之處。
下面以一個(gè)例子來實(shí)現(xiàn)。
搜索框和搜索按鈕，我們希望在搜索框輸入部分書名時(shí)，能夠?qū)崿F(xiàn)書名的自動(dòng)補(bǔ)全功能。每當(dāng)點(diǎn)擊了相應(yīng)的書名，就把內(nèi)容輸入到搜索框。
對(duì)應(yīng)的代碼
重慶分公司
重慶分公司
Search
為了存貯自動(dòng)補(bǔ)全的文字，我們使用div標(biāo)簽
設(shè)置背景色為白色，絕對(duì)布局。并且默認(rèn)不顯示。
在百度的補(bǔ)全功能中我們發(fā)現(xiàn)，每輸入一個(gè)字，對(duì)應(yīng)的補(bǔ)全文字就會(huì)更新，所以我們要為搜索框設(shè)置鍵盤抬起事件（keyup），然后就是Ajax實(shí)現(xiàn)異步交互。
js代碼：
$(".inputtable").keyup(function(){
var content=$(this).val();
//如果當(dāng)前搜索內(nèi)容為空，無須進(jìn)行查詢
if(content==""){
$("#context1").css("display","none");
return ;
}
//由于瀏覽器的緩存機(jī)制 所以我們每次傳入一個(gè)時(shí)間
var time=new Date().getTime();
$.ajax({
type:"get",
//新建一個(gè)名為findBooksAjaxServlet的servlet
url:"${pageContext.request.contextPath}/servlet/findBooksAjaxServlet",
data:{name:content,time:time},
success:function(data){
//拼接html
var res=data.split(",");
var html="";
for(var i=0;i";
}
$("#context1").html(html);
//顯示為塊級(jí)元素
$("#context1").css("display","block");
}
});
}); 我們的鼠標(biāo)在選擇到自動(dòng)補(bǔ)全的內(nèi)容時(shí)，我們會(huì)發(fā)現(xiàn)內(nèi)容的那一行會(huì)變色，即onmouseover事件，離開時(shí)恢復(fù)原色onmouseout事件，點(diǎn)擊時(shí)將內(nèi)容填寫到搜索框onclick事件。所以在上面的代碼中我們會(huì)這樣寫
var html="";
for(var i=0;i";
} 而其三種事件對(duì)應(yīng)的js代碼如下：
//鼠標(biāo)移動(dòng)到內(nèi)容上
function changeBackColor_over(div){
$(div).css("background-color","#CCCCCC");
}
//鼠標(biāo)離開內(nèi)容
function changeBackColor_out(div){
$(div).css("background-color","");
}
//將點(diǎn)擊的內(nèi)容放到搜索框
function setSearch_onclick(div){
$(".inputtable").val(div.innerText);
$("#context1").css("display","none");
}servlet：向server調(diào)用相應(yīng)的業(yè)務(wù)然后返回查詢的結(jié)果
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
//獲取搜索框輸入的內(nèi)容
String name=request.getParameter("name");
name=new String(name.getBytes("iso-8859-1"), "utf-8");
//向server層調(diào)用相應(yīng)的業(yè)務(wù)
BooksServer booksServer=new BooksServer();
String res=booksServer.findBooksAjax(name);
//返回結(jié)果
response.getWriter().write(res);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}service層
把dao層查詢的所有書名拼接為一個(gè)字符串。
//查詢所有的書本名
public String findBooksAjax(String name) {
Listdao層
根據(jù)部分書名，查詢類似的書名
//根據(jù)部分書名，查詢類似的書名 public List
運(yùn)行結(jié)果：
關(guān)于利用Ajax實(shí)現(xiàn)一個(gè)自動(dòng)補(bǔ)全功能就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
