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" "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><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实现百度搜索框自动提示功能相关推荐

jquery mysql jsp搜索功能_实现搜索框自动提示功能（jquery+php）
客户端代码 #search{font-size:14px;} #search .k{padding:2px 1px; width:320px;} #search_auto{border:1px sol ...
模拟百度搜索框自动联想功能，原生js+jsonp轻松搞定
链接下面是我闲暇时总结的JS.CSS.算法总结,欢迎大家点赞.star-- 有趣实用的CSS效果前端博客传送门 LeetCode个人题解传送门讲解如何利用百度接口仿写一个搜索联想词功能效果 ...
案例:模拟百度搜索框自动加载内容
实现效果如下我们重点分析js代码,所以html和css不做过多解释(想了解的直接看结尾的源代码) js需求分析: 需求一:搜索框txt键盘弹起:获取文本,根据搜索文本显示对象的ul内容列表; 需求二 ...
仿百度搜索框自动下拉提示
摘自 https://www.cnblogs.com/kingshing/p/7389299.html 转载于:https://www.cnblogs.com/JonMingrev/p/1015380 ...
搜百度 php教程,jquery php 百度搜索框智能提示效果_PHP教程
-- phpMyAdmin SQL Dump -- version 3.3.5 -- http://www.phpmyadmin.net -- -- 主机: localhost -- 生成日期: 20 ...
jquery 搜索框自动提示
2019独角兽企业重金招聘Python工程师标准>>> 使用jquery-ui中特性 https://jqueryui.com/autocomplete/ http://www.ru ...
站长工具|百度搜索框提示功能
百度向站长开放免费"百度搜索框"代码和"百度搜索框提示"代码.只需进行简单的设置, 即可将" 百度搜索框( 带提示功能)"功能快速加入到您的 ...
java ajax搜索框提示,Javaweb-案例练习-2-给搜索框添加提示
Javaweb-案例练习-2-给搜索框添加提示凯哥java 凯哥java 给搜索框添加搜索提示功能这篇来利用Ajax做一个给搜索框添加搜索提示的功能,这个我们在百度首页,搜索框随便输入一个字符,就 ...
Android 利用AutoCompleteTextView实现模糊搜索功能，搜索结果自动提示，识别拼音首字母并转汉字提示
这里说一下怎么利用 Android 的 AutoCompleteTextView 控件实现模糊搜索功能,AutoCompleteTextView 自带自动提示功能.如果对自动提示的布局自定义要求比较 ...

Ajax实现百度搜索框自动提示功能

Ajax实现百度搜索框自动提示功能

文章目录

一、实现效果

二、代码实现

1.前端页面

2.后端代码

Ajax实现百度搜索框自动提示功能相关推荐

最新文章

热门文章