使用Ajax模仿百度搜索框的自動提示功能實(shí)例
啊啊，熬夜了。今天學(xué)習(xí)了ajax給我的感覺就是，”哇塞“ajax好酷炫哦，（額。。。后端狗，接觸到了大前端的魅力了），這么晚了還是直奔主題把。let's go!
百度搜索提示框，我想大家都很熟悉了把，是什么樣子我也就不再贅述。直接看代碼
來我們寫一個(gè)簡陋的jsp頁面 look! 是這個(gè)樣子的
下面是代碼:
<%@ page language="java" contenttype="text/html; charset=utf-8"
pageencoding="utf-8"%>
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test baidu</title>
</head>
<body>
<!--
文本輸入框
-->
<div id="serach">
<input type="text" name="text" id="text" />
<input type="submit" value="搜索" />
</div>
<!--
提示下拉框
-->
<div id="tips" style="display: none;
width: 171px; border: 1px solid pink";>
</div>
</body>
<script>
window.onload=function(){
//獲取文本輸入框
var textelment = document.getelementbyid("text");
//獲取下提示框
var div = document.getelementbyid("tips");
textelment.onkeyup=function(){
//獲取用戶輸入的值
var text = textelment.value;
//如果文本框中沒有值，則下拉框被隱藏，不顯示
if(text==""){
div.style.display="none";
return;
}
//獲取xmlhttprequest對象
var xhr = new xmlhttprequest();
//編寫回調(diào)函數(shù)
xhr.onreadystatechange=function(){
//判斷回調(diào)的條件是否準(zhǔn)備齊全
if(xhr.readystate==4){
if(xhr.status==200){
//取的服務(wù)器端傳回的數(shù)據(jù)
var str = xhr.responsetext;
//判斷傳回的數(shù)據(jù)是否為空,若是則直接返回，不顯示
if(str==""){
return;
}
//我們將會在服務(wù)器端把數(shù)據(jù)用 , 隔開，當(dāng)然這里也可以使用json
var result = str.split(",");
var childs = "";
//遍歷結(jié)果集，將結(jié)果集中的每一條數(shù)據(jù)用一個(gè)div顯示，把所有的div放入到childs中
for(var i=0; i<result.length;i++){
childs += "<div onclick='write(this)' onmouseout='recovercolorwhenmouseout(this)' onmouseover='changecolorwhenmouseover(this)'>"+result[i]+"</div>";
}
//把childs 這div集合放入到下拉提示框的父div中，上面我們以獲取了
div.innerhtml=childs;
div.style.display="block";
}
}
}
//創(chuàng)建與服務(wù)器的連接
xhr.open("get","${pagecontext.request.contextpath}/test?text="+text);
//發(fā)送
xhr.send();
}
}
//鼠標(biāo)懸停時(shí)改變div的顏色
function changecolorwhenmouseover(div){
div.style.backgroundcolor="pink";
}
//鼠標(biāo)移出時(shí)回復(fù)div顏色
function recovercolorwhenmouseout(div){
div.style.backgroundcolor="";
}
//當(dāng)鼠標(biāo)帶點(diǎn)擊div時(shí)，將div的值賦給輸入文本框
function write(div){
//將div中的值賦給文本框
document.getelementbyid("text").value=div.innerhtml;
//讓下拉提示框消失
div.parentnode.style.display="none";
}
</script>
</html>
再看servlet:
package com.zhuxingyi.servlet;
import java.io.ioexception;
import java.util.arraylist;
import java.util.list;
import javax.servlet.servletexception;
import javax.servlet.annotation.webservlet;
import javax.servlet.http.httpservlet;
import javax.servlet.http.httpservletrequest;
import javax.servlet.http.httpservletresponse;
/**
* 百度下拉框服務(wù)器端
*/
@webservlet("/test")
public class test extends httpservlet {
private static final long serialversionuid = 1l;
protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
//獲取前端傳入的數(shù)據(jù)
string text = request.getparameter("text");
//我們在這里也還是向list集合中添加數(shù)據(jù)，模擬數(shù)據(jù)庫的查詢操作
system.out.println(text);
list<string> list =new arraylist<>();
list.add("zhuxingyi");
list.add("zhuwei");
list.add("zhuyuanz");
list.add("zhude");
//將數(shù)據(jù) 轉(zhuǎn)換成字符串
string str = "";
if(text.startswith("z")) {
for(int i=0;i<list.size();i++) {
if(i>0) {
str+=",";
}
str+=list.get(i);
}
//將處理好的數(shù)據(jù)傳回給客戶端
response.getwriter().write(str);
}
}
protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
// todo auto-generated method stub
doget(request, response);
}
}
演示一下看看呢，（很尷尬，樓主還不會做gif圖呢，各位先看看靜態(tài)圖把。。。）
輸入‘z'試一試呢:
點(diǎn)擊一下試一試呢:
ok了，這就是一個(gè)簡單的模仿百度的搜索框啦，以上有不足的地方你一定要指出哦，謝謝。拜啦
以上這篇使用ajax模仿百度搜索框的自動提示功能實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持碩編程。
學(xué)習(xí)AJAX