Ajax实现百度搜索框自动提示功能
当你在搜索框内写入关键字时下拉框会匹配和你输入的关键字相匹配的信息
文章目录
Ajax实现百度搜索框自动提示功能一、实现效果二、代码实现1.前端页面2.后端代码一、实现效果
当你在搜索框内写入关键字时下拉框会匹配和你输入的关键字相匹配的信息
二、代码实现
1.前端页面
baidu.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Test Baidu</title><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;}//我们将会在服务器端把数据用 , 隔开，当然这里也可以使用jsonvar result = str.split(",");var childs = "";//遍历结果集，将结果集中的每一条数据用一个div显示，把所有的div放入到childs中for(var i=0; i<result.length;i++){childs += "<div οnclick='Write(this)' οnmοuseοut='recoverColorwhenMouseout(this)' οnmοuseοver='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="blue";}//鼠标移出时回复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></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></html>
2.后端代码
BaiduServlet.jsp
package 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 BaiduServlet extends HttpServlet {private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//中文转码request.setCharacterEncoding("UTF-8");response.setCharacterEncoding("UTF-8");//获取前端传入的数据String text = request.getParameter("text");//我们在这里也还是向list集合中添加数据，模拟数据库的查询操作System.out.println(text);List<String> list =new ArrayList<>();list.add("彭博宇");list.add("彭德怀");list.add("小彭");list.add("彭总");//将数据 转换成字符串String str = "";if(text.startsWith("彭")) {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 {doGet(request, response);}}
如果觉得《Ajax实现百度搜索框自动提示功能》对你有帮助，请点赞、收藏，并留下你的观点哦！
