ajax04_实现关键字联想和自动补全
用ajax实现关键字联想和自动补全
遇到的小坑
- 回调函数相对window.onload的摆放位置
- 给回调函数addData传数据时，如何操作才能将数据传进去
代码实现
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax实现关键字联想和自动补全</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#keyWords{
margin-top: 10px;
margin-left: 10px;
width: 300px;
height: 25px;
font-size: 20px;
padding-left: 5px;
}
#dataDiv{
background-color: wheat;
width: 300px;
margin-left: 10px;
display: none;
}
#dataDiv p{
padding-left: 10px;
padding-top: 7px;
padding-bottom: 3px;
cursor: pointer;
}
#dataDiv p:hover{
background-color: cornflowerblue;
color: white;
}
</style>
</head>
<body>
<!--
需求:
1. 给定文本输入框，显示层，显示层里的显示栏
2. 当用户在文本框里输入数据时，发生keyup事件时，将文本框里的数据，以ajax请求方式提交的到后端
3. 后端对前端提交的关键字，在数据库里进行模糊查询
4. 将后端查询到的数据以json格式传给前端
5. 前端解析后端传来的数据，将数据显示在提示栏里
6. 当用户点击提示中的某条提示信息时，将提示栏里的信息赋给输入框，隐藏提示层
注意：1. 凡是输入框里发生keyup事件时，都要进行ajax请求提交，实时获取提示信息
2. 输入框信息为空时，也要隐藏提示层
-->
<script>
window.onload = function (){
//获取dom对象
input_txt = document.getElementById("keyWords")
div_data = document.getElementById("dataDiv")
//为输入框绑定keyup事件
input_txt.onkeyup = function (){
//输入框为空，隐藏提示层
if(this.value.trim() == ""){
div_data.style.display = "none"
}else{
//每当keyup时，发送ajax请求，传递文本框内数据
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = function (){
if(this.readyState == 4){
if(this.status == 200){
//解析后端传来的json数据:[{"content" : "data"}, {}, {}]
var jsonArray = JSON.parse(this.responseText)
var html = ""
for(var i = 0; i < jsonArray.length; i++){
var perData = jsonArray[i].content
//为p标签绑定单击事件,将数据以字符串的形式传给回调函数
html += "<p onclick='addData(\""+perData+"\")'>"+perData+"</p>"
}
div_data.innerHTML = html
div_data.style.display = "block"
}else{
alert("异常状态码: " + this.status)
}
}
}
xmlHttpRequest.open("GET", "/ajax/ajaxAutoComplete?keyWords="+this.value+"", true)
xmlHttpRequest.send()
}
}
}
function addData(perData){
//完成自动补全
input_txt.value= perData
//隐藏提示层
div_data.style.display = "none"
}
</script>
<input type="text" id="keyWords">
<div id="dataDiv">
<!--
<p>java</p>
<p>jsp</p>
<p>service</p>
<p>servlet</p>
<p>docker</p>
<p>linux</p>
-->
</div>
</body>
</html>
后端代码
package com.examples.ajax.servlet;
import com.alibaba.fastjson.JSON;
import com.examples.ajax.beans.KeyWords;
import com.examples.ajax.utils.DBUtils;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
@WebServlet("/ajaxAutoComplete")
public class AjaxRequest13 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//获取前端传来的关键字
String keyWords = request.getParameter("keyWords");
//连接数据库，进行模糊查询
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
//封装关键字对象
List<KeyWords> keyWordsList = new ArrayList<>();
try {
conn = DBUtils.getConnection();
String sql = "select content from tb_search where content like ?";
ps = conn.prepareStatement(sql);
ps.setString(1, keyWords + "%");
rs = ps.executeQuery();
while(rs.next()){
String content = rs.getString("content");
//封装成关键字对象
KeyWords keyWordsObj = new KeyWords(content);
//将关键字对象封装
keyWordsList.add(keyWordsObj);
}
} catch (SQLException e) {
throw new RuntimeException(e);
}finally {
DBUtils.close(conn, ps, rs);
}
//后端数据json化
String jsonKeyWordsArray = JSON.toJSONString(keyWordsList);
//返回后端数据
response.getWriter().write(jsonKeyWordsArray);
}
}
用到的实体类
package com.examples.ajax.beans;
public class KeyWords {
private String content;
public KeyWords() {
}
public KeyWords(String content) {
this.content = content;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
}
自己封装的jdbc工具类
package com.examples.ajax.utils;
import java.sql.*;
import java.util.ResourceBundle;
/**
* 封装自己的jdbc工具类
*/
public class DBUtils {
static ResourceBundle bundle = ResourceBundle.getBundle("jdbc");
static String driver;
static String url;
static String username;
static String password;
static {
driver = bundle.getString("driver");
url = bundle.getString("url");
username = bundle.getString("username");
password = bundle.getString("password");
try {
Class.forName(driver);
} catch (ClassNotFoundException e) {
throw new RuntimeException(e);
}
}
private DBUtils(){}
public static Connection getConnection() throws SQLException {
return DriverManager.getConnection(url, username, password);
}
public static void close(Connection conn, PreparedStatement ps, ResultSet rs){
if(rs != null){
try {
rs.close();
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
if(ps != null){
try {
ps.close();
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
if(conn != null){
try {
conn.close();
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
}
}
用到的依赖:不再赘述
数据库表:
一张表: tb_search
数据表描述: 除了id, 就一个字段 content varchar(255) not null
效果展示:
自己在远程数据库上用docker运行了一个mysql数据库，查询速度比较慢，但演示关键字联想和自动补全功能的测试目的已经达到
ajax04_实现关键字联想和自动补全的更多相关文章
- mysql自动补全功能（只能用于表/列 名）
关键字:mysql自动补全,auto-rehash 注:只能补齐表,列名,使用tab进行补全操作 一.修改my.cnf vi /etc/my.cnf [mysql] auto-rehash #添加au ...
- IDEA 代码自动补全/自动联想 功能
IDEA 的代码补全/自动联想功能,可以仅仅输入几个字母,自动补全一整段代码,非常舒服. 代码自动联想功能在 设置 -> Editor -> Live Templates 查看,很多都非常 ...
- Eclipse Code Recommenders 自动补全(联想)神器
Eclipse Code Recommenders 可以在eclipse市场中下载.自动补全.模糊匹配.非常有用!
- Vim自动补全神器–YouCompleteMe
YouCompleteMe的特别之处 基于语义补全 总所周知,Vim是一款文本编辑器.也就是说,其最基础的工作就是编辑文本,而不管该文本的内容是什么.在Vim被程序员所使用后,其慢慢的被肩负了与IDE ...
- 我的Vim配置(自动补全/树形文件浏览)
配置文件的下载路径在这里 http://files.cnblogs.com/files/oloroso/vim.configure.xz.gz 这实际上是一个 xz 格式的文件,添加的 gz 文件后 ...
- latextools \cite 自动补全
最近在用latex写毕业论文,编辑环境用的是Sublime Text 2 加 latextools 插件,在使用latextools的\cite命令来引用参考文献时,我们希望输入\cite{ 后自动弹 ...
- WinForm AutoComplete 输入提示、自动补全
一.前言 又临近春节,作为屌丝的我,又要为车票发愁了.记得去年出现了各种12306的插件,最近不忙,于是也着手自己写个抢票插件,当是熟悉一下WinForm吧.小软件还在开发中,待完善后,也写篇博客与大 ...
- phpmyadmin 主机名自动补全
2015年2月9日 14:29:25 新安装的phpmyadmin在登录界面中, 主机名的输入框没有自动补全功能, 导致每次都得手动输入ip地址 找到 phpmyadmin/libraries/aut ...
- Vim 的补全模式加速器，轻松玩转全部 15 种自动补全模式
1. 关于 Vim 补全模式 ---- Vim 一共提供了 15 种自动补全的模式(:help ins-completion).其中有两种的补全列表内容与另外两种相同,只是排序不同,这 15 种 ...
随机推荐
- [游记] pkusc 2021 游记
流水账 Day-4 写了ICPC的一道DP,有点细节,虽然写得有点难受,但挺好玩 Day-3 写了PKUSC2018最水的一题 是随机开的题 Day-2 可以去pkusc了,从今天中午开始停课 刚吃完 ...
- mybatis两种嵌套查询方式
1,推荐用第一种 <select id="getTeacher2" resultMap="TeacherStudent"> select s.id ...
- 微信H5页面唤醒APP并传参跳转uniapp
主要实现是利用微信内置浏览器支持的<wx-open-launch-app>开放标签可以让你的H5网页拉起APP 在链接https://developers.weixin.qq.com/ ...
- 用更云原生的方式做诊断｜大规模 K8s 集群诊断利器深度解析
背景 通常而言,集群的稳定性决定了一个平台的服务质量以及对外口碑,当一个平台管理了相当规模数量的 Kubernetes 集群之后,在稳定性这件事上也许会"稍显被动". 我们可能经常 ...
- unity---脚本创建按钮
脚本创建按钮 新建文件夹 Resources 方便引用图片 在文件Resources中新建Images,并且下载一个图片 没有图片,按钮内容无法显示 图片需要处理一下 Textrue Type 改为 ...
- 每天一个 HTTP 状态码 前言
前前言 在重新开始写博文(其实大多也就最多算是日常笔记小结)之际,就想着从短小精悍的文章入手,就想到了 HTTP 状态码.另外,记得很久之前,看过一个<每天一个 Linux 命令>系列文章 ...
- Vue路由的安装
1.在Vue ui中插件中找到添加vue-router 2.安装以后,项目中的会自动完成配置. 3.在store中的index.js配置路由页面以及路径.
- 树形dp基础
今天来给大家讲一下数形dp基础 树形dp常与树上问题(lca.直径.重心)结合起来 而这里只讲最最基础的树上dp 1.选课 题目描述 在大学里每个学生,为了达到一定的学分,必须从很多课程里选择一些课程 ...
- bootstrap 4.0 dropdown 找不到popper.js 的解决方案
最近项目中升级bootstrap 由3.3.7版 升了4.0版本 发现 dropdown 找不到popper.js 解决办法:npm install -save popper 下载完之后,查看node ...
- C语言学习之我见-malloc和free内存申请及释放函数
malloc函数负责向计算机申请确定大小的内存空间. free函数负责释放malloc的申请空间. (1)函数原型 void free(void *_Memory); void * malloc(si ...