当前位置： 首页 > news >正文

AJAX学习笔记9 搜索联想自动补全

news 2026/3/27 1:36:22

AJAX学习笔记8 跨域问题及解决方案_biubiubiu0706的博客-CSDN博客

其实就一个功能

搜索联想

自动补全

键盘按下事件keydown 键盘弹起事件keyup   做模糊查询

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ajax实现搜索联想自动补全</title><style type="text/css">.userInput{width: 300px;height: 25px;font-size: 20px;margin-left: 20px;padding-left: 5px;}.showDataDiv{width: 300px;margin-left: 20px;border: 1px solid lightblue;background-color: antiquewhite;}.showDataDiv p{padding-left: 5px;margin-top: 3px;margin-bottom: 5px;}.showDataDiv p:hover{/*加小手*/cursor: pointer;border:1px blue solid;background-color: aliceblue;}</style>
</head>
<body>
<input type="text" class="userInput">
<div class="showDataDiv"><p>北京疫情最新情况</p><p>北京天气</p><p>北京时间</p><p>北京房产</p><p>北京美女</p>
</div>
</body>
</html>

加个display:none;就隐藏掉

插入数据库

引入fastjson,mysql 依赖

后端代码

import com.alibaba.fastjson.JSON;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;/*** @author hrui* @date 2023/9/7 9:53*/
@WebServlet("/getAny")
public class GetAnyServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String keywords = req.getParameter("keywords");Connection conn=null;PreparedStatement ps=null;ResultSet rs=null;List<Map> list=new ArrayList<>();try {Class.forName("com.mysql.cj.jdbc.Driver");conn = DriverManager.getConnection("xxx", "xxx", "xxx");String sql="select id,content from t_ajax where content like ?";ps=conn.prepareStatement(sql);ps.setString(1, keywords+"%");rs = ps.executeQuery();while(rs.next()){String id = rs.getString("id");String content = rs.getString("content");Map<String,String> map=new HashMap<>();map.put("id", "id");map.put("content", content);list.add(map);}} catch (ClassNotFoundException | SQLException e) {e.printStackTrace();}finally {if(rs!=null){try {rs.close();} catch (SQLException e) {e.printStackTrace();}}if(ps!=null){try {ps.close();} catch (SQLException e) {e.printStackTrace();}}if(conn!=null){try {conn.close();} catch (SQLException e) {e.printStackTrace();}}}resp.setContentType("text/html;charset=utf-8");PrintWriter writer = resp.getWriter();String s = JSON.toJSONString(list);writer.print(s);}
}

前端

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ajax实现搜索联想自动补全</title><style type="text/css">.userInput{width: 300px;height: 25px;font-size: 20px;margin-left: 20px;padding-left: 5px;}.showDataDiv{width: 300px;margin-left: 20px;border: 1px solid lightblue;background-color: antiquewhite;display:none;}.showDataDiv p{padding-left: 5px;margin-top: 3px;margin-bottom: 5px;}.showDataDiv p:hover{/*加小手*/cursor: pointer;border:1px blue solid;background-color: aliceblue;}</style>
</head>
<body>
<script type="text/javascript">/*不使用JQuery*/window.onload=()=>{document.getElementById("keywords").onkeyup=()=>{let xhr=new XMLHttpRequest();xhr.onreadystatechange=()=>{if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<300){//[{"id":"xxx","content":"xxxx"},{"id":"xxx","content":"xxxx"}]const json=JSON.parse(xhr.responseText)const html=""for(let i=0;i<json.length;i++){html+="<p onclick='setInput(\""+json[i].content+"\")'>"+json[i].content+"</p>"}document.getElementById("showDataDiv").innerHTML=html//将div显示出来document.getElementById("showDataDiv").style.display="block"}}}console.log(this.value)xhr.open("get","/d/getAny?keywords="+this.value,true)xhr.send()}}function setInput(value){document.getElementById("keywords").value=value//将div隐藏document.getElementById("showDataDiv").style.display="none"}
</script>
<input type="text" class="userInput" id="keywords">
<div class="showDataDiv">
<!--    <p>北京疫情最新情况</p>-->
<!--    <p>北京天气</p>-->
<!--    <p>北京时间</p>-->
<!--    <p>北京房产</p>-->
<!--    <p>北京美女</p>-->
</div>
</body>
</html>

相关文章：

AJAX学习笔记9 搜索联想自动补全

AJAX学习笔记8 跨域问题及解决方案_biubiubiu0706的博客-CSDN博客 其实就一个功能 搜索联想 自动补全 键盘按下事件keydown 键盘弹起事件keyup 做模糊查询 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><t…...

编程日记 2023/9/14 4:05:20

Docker启动失败报错Failed to start Docker Application Container Engine解决方案

Docker启动失败报错Failed to start Docker Application Container Engine解决方案_天涯人6的博客-CSDN博客...

编程日记 2023/9/14 4:04:19

安装React脚手架

在安装React脚手架之前&#xff0c;你需要决定使用哪个包管理工具。这里我们选择使用npm。运行下面的命令来安装React脚手架&#xff1a; npm install -g create-react-app这个命令会在全局安装React脚手架工具create-react-app。 现在&#xff0c;你已经准备好创建一个新的R…...

编程日记 2023/9/14 4:03:17

想要精通算法和SQL的成长之路 - 受限条件下可到达节点的数目

想要精通算法和SQL的成长之路 - 受限条件下可到达节点的数目 前言一. 相交链表&#xff08;邻接图和DFS&#xff09; 前言 想要精通算法和SQL的成长之路 - 系列导航 一. 相交链表&#xff08;邻接图和DFS&#xff09; 原题链接 public int reachableNodes(int n, int[][] ed…...

编程日记 2023/9/14 3:59:14

加快项目开发进度常用5种方法

项目进度管理是根据进度目标&#xff0c;制定合理的进度计划&#xff0c;全程监控项目进度的执行情况。这样有利于明确项目目标&#xff0c;协调团队行动&#xff0c;提高开发效率&#xff0c;从而最大化项目利益。而加快项目进度&#xff0c;有利于提高项目整体效率&#xff0…...

编程日记 2023/9/14 3:55:09

leetcode做题笔记136. 只出现一次的数字

给你一个 非空 整数数组 nums &#xff0c;除了某个元素只出现一次以外&#xff0c;其余每个元素均出现两次。找出那个只出现了一次的元素。 你必须设计并实现线性时间复杂度的算法来解决此问题&#xff0c;且该算法只使用常量额外空间。 思路一&#xff1a;快排&#xff08;…...

编程日记 2023/9/14 3:54:08

vuex 模拟异步调用

在页面中首先定义一个调用vuex异步函数的方法 <el-button click fetchData></el-button> {{asyncData}} vuex 中 const store new Vuex.Store({state: {asyncData: null,},mutations: {SET_ASYNC_DATA(state, data) {state.asyncData data;},},actions: {fe…...

编程日记 2023/9/14 3:52:06

error：Failed building wheel for XXX

解决方案适用于大多数的pip 安装时出现的Failed building wheel for XXX 出现问题 按以往快速安装包的经验&#xff0c;第一反应当然是使用简单又快捷的terminal命令加上镜像&#xff0c;如下&#xff1a; pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple结…...

编程日记 2023/9/14 3:51:06

【linux命令讲解大全】112.Linux 系统管理工具：dpkg-statoverride 和 dstat 的使用介绍

文章目录 dpkg-statoverride补充说明语法选项实例 dstat补充说明下载安装方法一方法二 使用说明语法常用选项实例 从零学 python dpkg-statoverride 在 Debian Linux 中覆盖文件的所有权和模式。 补充说明 dpkg-statoverride 命令用于在 Debian Linux 中覆盖文件的所有权和模…...

编程日记 2023/9/14 3:49:01

ffmpeg草稿

avformat 用于解析容器和协议(protocol)。 avcodec 用于编码和解码基本流(您已经拥有的)。 Qt/C音视频开发44-本地摄像头推流&#xff08;支持分辨率/帧率等设置/实时性极高&#xff09;_feiyangqingyun的博客-CSDN博客 void FFmpegThread::initInputFormat() {//本地摄像头/桌…...

编程日记 2023/9/14 3:47:59

熵 | 无线通信知识

文章目录 一、信息论&#xff08;熵、联合熵、条件熵&#xff09;二、Bernoulli熵三、联合熵和条件熵四、互信息五、相对熵(KL距离)六、微分熵七、最大熵分布常需要的不等式公式 一、信息论&#xff08;熵、联合熵、条件熵&#xff09; 熵定义&#xff1a; H ( X ) E [ − l …...

编程日记 2023/9/14 3:46:58

黑马JVM总结（七）

&#xff08;1&#xff09;StringTable_编译器优化 “a”“b”对应#4&#xff1a;是去常量池中找ab的这个符号 astore 5&#xff1a;是把这个存入编号为5的局部变量 “ab”对应的指令 #4&#xff0c;跟“a”“b”对应#4下面弄是一样的 在执行s3“ab”这行个代码时&#xf…...

编程日记 2023/9/14 3:43:55

Vue3核心语法一

Vue3核心语法一 rectiveshallowReactiverefcomputedwatchwatchEffet 使用Vue3创建项目template中标签可以多个根标签,可以通过setup开启组合式API,组合式API优点可以使相同业务放到一起 rective 定义响应式数据, import { reactive} from "vue";const data reactiv…...

编程日记 2023/9/14 3:42:54

5.11.Webrtc接口的设计原理

在上节课中呢&#xff0c;我向你介绍了web rtc的接口宏&#xff0c;那有很多同学会产生疑问啊&#xff0c;那觉得web rtc为什么要把接口设计的这么复杂&#xff1f;还非要通过宏来实现一个代理类&#xff0c;再通过代理类来调用到web rtc内部。 那为什么要这么设计呢&#xf…...

编程日记 2023/9/14 3:41:53

2022年09月 C/C++（八级）真题解析#中国电子学会#全国青少年软件编程等级考试

C/C++编程（1~8级）全部真题・点这里 第1题：道路 N个以 1 … N 标号的城市通过单向的道路相连:。每条道路包含两个参数：道路的长度和需要为该路付的通行费（以金币的数目来表示） Bob and Alice 过去住在城市 1.在注意到Alice在他们过去喜欢玩的纸牌游戏中作弊后，Bob和她分手…...

编程日记 2023/9/14 3:39:51

Vue3 监听属性-watch

文章目录 Vue3 监听属性-watch1. 概念2. 实例2.1 通过使用 watch 实现计数器2.2 千米与米之间的换算2.3 异步加载中使用 watch2.4 小计 Vue3 监听属性-watch 1. 概念 Vue3 监听属性 watch&#xff0c;可以通过 watch 来响应数据的变化。 watch 的作用&#xff1a;用于监测响应…...

编程日记 2023/9/14 3:38:50

JWT安全

文章目录 理论知识cookie(放在浏览器)session(放在 服务器)tokenjwt&#xff08;json web token&#xff09;headerpayloadSignatureJWT通信流程 JWT与Token 区别相同点区别 WebGoat靶场--JWT tokens环境启动第四关第五关第七关 属于越权漏洞 理论知识 cookie(放在浏览器) ​…...

编程日记 2023/9/14 3:36:48

LabVIEW利用人工神经网络辅助进行结冰检测

LabVIEW利用人工神经网络辅助进行结冰检测 结冰对各个领域构成重大威胁&#xff0c;包括但不限于航空航天和风力涡轮机行业。在起飞过程中&#xff0c;飞机机翼上轻微积冰会导致升力降低25%。研究报告称&#xff0c;涡轮叶片上的冰堆积可在19个月的运行时间内造成29MWh的功率损…...

编程日记 2023/9/14 3:34:45

Linux安装MySQL8.0

又又又又..Linux装MySQL。 删除原有的MySQL 查看安装的mysql信息&#xff1a;rpm -qa|grep -i mysql 删除mysql相关服务&#xff1a;rpm -e --nodeps 查询mysql遗留文件和依赖信息&#xff1a;find / -name mysql 手动删除mysql配置文件&#xff1a;rm -rf /etc/my.cnf 相关…...

编程日记 2023/9/14 3:32:43

【【萌新编写RISCV之前言CPU的部分介绍.3】】

萌新编写RISCV之前言CPU的部分介绍.3 CPU的数字电路结构实际十分简单&#xff0c;最主要的模块有PC&#xff08;地址生成&#xff09;&#xff0c;ALU&#xff08;运算&#xff09;&#xff0c;Register&#xff08;寄存&#xff09;&#xff0c;Decode&#xff08;译码&#…...

编程日记 2023/9/14 3:29:37

LFM2.5-1.2B-Thinking-GGUF前端面试题解析实战：模拟面试与答案生成

LFM2.5-1.2B-Thinking-GGUF前端面试题解析实战&#xff1a;模拟面试与答案生成 1. 开篇&#xff1a;AI如何改变前端面试准备方式 前端开发岗位的竞争日益激烈&#xff0c;技术面试的难度也水涨船高。传统的面试准备方式往往效率低下——求职者要么死记硬背网上的标准答案&…...

编程新知 2026/3/27 1:09:41

Redis未授权访问漏洞实战：从SSH公钥到反弹shell的5种利用方式详解

Redis未授权访问漏洞深度攻防&#xff1a;5种高阶利用与防御方案 Redis作为高性能键值数据库&#xff0c;其未授权访问漏洞长期位居企业安全风险Top 10。本文将突破常规教程框架&#xff0c;从攻击者视角剖析5种实战利用手法&#xff0c;同时提供企业级防御方案。不同于基础复现…...

编程新知 2026/3/27 0:25:29

VSCode党必看！用轻量级方案玩转LaTeX：2024年TexLive+VSCode配置全攻略

VSCode党必看&#xff01;用轻量级方案玩转LaTeX&#xff1a;2024年TexLiveVSCode配置全攻略 对于习惯在VSCode中高效编码的开发者而言&#xff0c;切换到传统LaTeX编辑器往往意味着要放弃熟悉的快捷键、扩展生态和流畅的代码体验。本文将带你用完全基于VSCode的轻量级方案构建…...

编程新知 2026/3/27 0:17:27

别再只会调库了！用NumPy和Random手搓一个SMOTE算法，我踩过的坑都在这了

从零实现SMOTE算法&#xff1a;NumPy实战与关键问题解析 理解类别不平衡问题的本质 在数据科学和机器学习领域&#xff0c;我们经常会遇到类别分布严重不均衡的数据集。想象一下&#xff0c;你正在处理一个信用卡欺诈检测项目&#xff0c;正常交易记录可能有数百万条&#xff0…...

编程新知 2026/3/26 23:43:14

vs code 实现source insight中的快捷键功能

1.自定义快捷键连续两组快捷键CtrlK CtrlS打开键盘快捷键定义界面修改向前向后的快捷键。ctrlu删除当前行复制当前行到下面2.增加bookmarks功能扩展部分装插件&#xff0c;定义快捷键ctrlm增加标签可以修改标签3.多行移动多行向上移动&#xff0c;向下移动Windows/Linux 用 Alt…...

编程新知 2026/3/26 22:32:20

OpenClaw任务编排技巧：Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF复杂流程分解策略

OpenClaw任务编排技巧&#xff1a;Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF复杂流程分解策略 1. 为什么需要任务编排 上周我尝试用OpenClaw自动完成一篇技术博客的写作和发布&#xff0c;结果遭遇了连环翻车&#xff1a;模型先花20分钟生成了偏离主题的初稿&…...

编程新知 2026/3/26 22:16:15

机器学习期末考突击指南：从线性回归到SVM的实战解题技巧

机器学习期末考突击指南&#xff1a;从线性回归到SVM的实战解题技巧 期末考试临近&#xff0c;面对机器学习课程中纷繁复杂的算法和公式&#xff0c;许多同学感到无从下手。本文将从实际考题出发&#xff0c;手把手带你攻克线性回归、朴素贝叶斯和SVM三大核心考点&#xff0c;不…...

编程新知 2026/3/26 21:15:52

3步实现会呼吸的界面边界：让表单交互体验提升300%的动态效果

3步实现会呼吸的界面边界&#xff1a;让表单交互体验提升300%的动态效果 【免费下载链接】motion-primitives UI kit to make beautiful, animated interfaces, faster. Customizable. Open Source. 项目地址: https://gitcode.com/gh_mirrors/mo/motion-primitives 在现…...

编程新知 2026/3/26 20:01:35

LingBot-World：1秒生成16帧！开源世界模型新突破

LingBot-World&#xff1a;1秒生成16帧&#xff01;开源世界模型新突破 【免费下载链接】lingbot-world-base-cam 项目地址: https://ai.gitcode.com/hf_mirrors/robbyant/lingbot-world-base-cam 导语&#xff1a;Robbyant团队发布开源世界模型LingBot-World&#xff…...

编程新知 2026/3/26 19:49:33

手把手教你用两块STM32F103C8T6实现CAN总线点对点通信（附完整代码）

从零开始实现STM32F103C8T6双板CAN总线通信实战指南 在嵌入式开发领域&#xff0c;CAN总线因其高可靠性和实时性成为工业控制、汽车电子等场景的首选通信协议。对于初学者而言&#xff0c;使用两块STM32F103C8T6开发板搭建CAN通信系统是掌握该技术的经典入门项目。本文将彻底拆…...

编程新知 2026/3/26 19:31:17