这篇文章给大家介绍使用ajax怎么实现一个百度搜索框的自动提示功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。<%@ page language="java"
这篇文章给大家介绍使用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 stubdoGet(request, response);} }演示一下看看呢，（很尴尬，楼主还不会做gif图呢，各位先看看静态图把。。。）
输入‘z'试一试呢:
点击一下试一试呢:
关于使用Ajax怎么实现一个百度搜索框的自动提示功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
--结束END--
本文标题: 使用Ajax怎么实现一个百度搜索框的自动提示功能
本文链接: https://lsjlt.com/news/252305.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0