溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹使用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();
//編寫回調函數
xhr.onreadystatechange=function(){
//判斷回調的條件是否準備齊全
if(xhr.readyState==4){
if(xhr.status==200){
//取的服務器端傳回的數據
var str = xhr.responseText;
//判斷傳回的數據是否為空,若是則直接返回，不顯示
if(str==""){
return;
}
//我們將會在服務器端把數據用 , 隔開，當然這里也可以使用json
var result = str.split(",");
var childs = "";
//遍歷結果集，將結果集中的每一條數據用一個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";
}
}
}
//創建與服務器的連接
xhr.open("GET","${pageContext.request.contextPath}/test?text="+text);
//發送
xhr.send();
}
}
//鼠標懸停時改變div的顏色
function changeColorwhenMouseover(div){
div.style.backgroundColor="pink";
}
//鼠標移出時回復div顏色
function recoverColorwhenMouseout(div){
div.style.backgroundColor="";
}
//當鼠標帶點擊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;
/**
* 百度下拉框服務器端
*/
@WebServlet("/test")
public class test extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//獲取前端傳入的數據
String text = request.getParameter("text");
//我們在這里也還是向list集合中添加數據，模擬數據庫的查詢操作
System.out.println(text);
List<String> list =new ArrayList<>();
list.add("zhuxingyi");
list.add("zhuwei");
list.add("zhuyuanz");
list.add("zhude");
//將數據 轉換成字符串
String str = "";
if(text.startsWith("z")) {
for(int i=0;i<list.size();i++) {
if(i>0) {
str+=",";
}
str+=list.get(i);
}
//將處理好的數據傳回給客戶端
response.getWriter().write(str);
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}演示一下看看呢，（很尷尬，樓主還不會做gif圖呢，各位先看看靜態圖把。。。）
輸入‘z'試一試呢:
點擊一下試一試呢:
關于使用Ajax怎么實現一個百度搜索框的自動提示功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
