欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用Ajax模仿百度搜索框的自動提示功能實(shí)例

 更新時間:2019年02月14日 11:32:11   作者:你微笑時很美12138  
今天小編就為大家分享一篇使用Ajax模仿百度搜索框的自動提示功能實(shí)例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

啊啊,熬夜了。今天學(xué)習(xí)了ajax給我的感覺就是,”哇塞“ajax好酷炫哦,(額。。。后端狗,接觸到了大前端的魅力了),這么晚了還是直奔主題把。Let's go!

百度搜索提示框,我想大家都很熟悉了把,是什么樣子我也就不再贅述。直接看代碼

來我們寫一個簡陋的jsp頁面 Look! 是這個樣子的

Ajax模仿百度搜索框的自動提示功能

下面是代碼:

<%@ 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ù)用一個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)懸停時改變div的顏色
 		function changeColorwhenMouseover(div){
 			div.style.backgroundColor="pink";
 		}
 		//鼠標(biāo)移出時回復(fù)div顏色
 		function recoverColorwhenMouseout(div){
 			div.style.backgroundColor="";
 		}
 		//當(dāng)鼠標(biāo)帶點(diǎn)擊div時,將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'試一試呢:

Ajax模仿百度搜索框的自動提示功能

點(diǎn)擊一下試一試呢:

Ajax模仿百度搜索框的自動提示功能

Ok了,這就是一個簡單的模仿百度的搜索框啦,以上有不足的地方你一定要指出哦,謝謝。拜啦

以上這篇使用Ajax模仿百度搜索框的自動提示功能實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Ajax實(shí)現(xiàn)動態(tài)加載數(shù)據(jù)

    Ajax實(shí)現(xiàn)動態(tài)加載數(shù)據(jù)

    這篇文章主要為大家詳細(xì)介紹了Ajax動態(tài)加載數(shù)據(jù)的小例子,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • Ajax讀取數(shù)據(jù)到表格的實(shí)現(xiàn)代碼

    Ajax讀取數(shù)據(jù)到表格的實(shí)現(xiàn)代碼

    前兩篇我們講了"ajax開始的準(zhǔn)備"與及如何使用ajax技術(shù)進(jìn)行簡單的數(shù)據(jù)讀?。裉煳覀円v的是:使用Ajax無刷新技術(shù)讀取服務(wù)端多條數(shù)據(jù),并將返回的數(shù)據(jù)顯示到一個表格內(nèi).
    2010-08-08
  • asp+ajax實(shí)現(xiàn)靜態(tài)頁面分頁的代碼

    asp+ajax實(shí)現(xiàn)靜態(tài)頁面分頁的代碼

    asp+ajax實(shí)現(xiàn)靜態(tài)頁面分頁的代碼...
    2007-11-11
  • Ajax與JSON的一些學(xué)習(xí)總結(jié)

    Ajax與JSON的一些學(xué)習(xí)總結(jié)

    Ajax技術(shù)的核心是XMLHttpRequest對象(簡稱XHR),可以通過使用XHR對象獲取到服務(wù)器的數(shù)據(jù),然后再通過DOM將數(shù)據(jù)插入到頁面中呈現(xiàn)。雖然名字中包含XML,但Ajax通訊與數(shù)據(jù)格式無關(guān),所以我們的數(shù)據(jù)格式可以是XML或JSON等格式
    2012-08-08
  • jQery ajax——load()方法示例介紹

    jQery ajax——load()方法示例介紹

    load(url,[data],[callback])url:加載的頁面地址;data: 可選項,發(fā)送到服務(wù)器的數(shù)據(jù),格式是key/value;callback:可選項,回調(diào)函數(shù),示例代碼如下
    2013-05-05
  • Ajax實(shí)現(xiàn)登錄案例

    Ajax實(shí)現(xiàn)登錄案例

    這篇文章主要為大家詳細(xì)介紹了Ajax實(shí)現(xiàn)登錄案例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • 淺談Ajax請求與瀏覽器緩存

    淺談Ajax請求與瀏覽器緩存

    下面小編就為大家?guī)硪黄獪\談Ajax請求與瀏覽器緩存。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-07
  • ajax返回object Object的快速解決方法

    ajax返回object Object的快速解決方法

    下面小編就為大家?guī)硪黄猘jax返回object Object的快速解決方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-10-10
  • ajax實(shí)現(xiàn)加載數(shù)據(jù)功能

    ajax實(shí)現(xiàn)加載數(shù)據(jù)功能

    這篇文章主要為大家詳細(xì)介紹了ajax實(shí)現(xiàn)加載數(shù)據(jù)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • 關(guān)于ajax的多次請求問題

    關(guān)于ajax的多次請求問題

    下面小編就為大家?guī)硪黄P(guān)于ajax的多次請求問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-10-10

最新評論