Ajax实现搜索文本框自动联想功能
Posted 花伤情犹在
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax实现搜索文本框自动联想功能相关的知识，希望对你有一定的参考价值。
前言
由于没有使用数据库，联想数据是通过List集合模拟的。
原理：
- 前端通过Ajax将文本框数据发送给后端
- 后端用List集合模拟数据库进行数据遍历
- 遍历的数据结果要加上分隔符(例如本人使用的是逗号“
,”) - 后端将遍历出来的数据拼接在一起发送给前端Ajax
- 前端Ajax接收到数据对数据进行遍历
- 利用split() 方法用于把一个字符串分割成字符串数组
- 然后再对其数组遍历，将遍历结果和html进行拼接
效果
代码
注意前端用到了JQuery框架
前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function () {
$("#content").keyup(function () {
//获取div提示对象
var tips = $("#tips");
//清空提示内容
($("#tips").html(""));
$.ajax({
url:"Searchservlet",
type:"post",
dataType:"text",
//将文本框的值作为发送的数据
data:{"name":this.value},
success:function (result) {
//当用户输入的内容为空的时候
if (result==""){//没有查询到相应数据
//去掉边框样式并停止下面的操作
tips.css("border","none");
return;
}
//获取结果并通过分割字符串
var cons =result.split(",");
//声明变量用来保存结果集
var divs ="";
//遍历结果集
for (var i =0;i<cons.length;i++){
//将遍历的结果拼接在div中存储在divs变量中
divs+="<div>"+cons[i]+"</div>"
}
//将拼接的html代码块显示在查询的结果集
tips.html(divs);
//将盒子设置为显示
tips.css("border","3px solid black");
},error:function () {
//alert("请求失败")
}
})
})
})
</script>
<body>
<div id="divSearch" style="margin: auto;text-align: center;border: 1px;width: 250px;">
<form action="Searchservlet" method="post">
<input type="text" name="name" id="content">
<input type="submit" value="搜索" id="result">
</form>
</div>
<!--根据用户输入的内容显示出来的盒子-->
<div id="tips" style="width: 200px;margin: auto;text-align: left;">
</div>
</body>
</html>
后台servlet代码：
package servlet;
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.util.ArrayList;
import java.util.List;
@WebServlet("/Searchservlet")
public class Searchservlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置响应内容类型和编码格式
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
response.setCharacterEncoding("utf-8");
//获取用户输入的内容
String name = request.getParameter("name");
//模拟数据库的查询操作
List<String> list = new ArrayList<>();
list.add("百度");
list.add("百事可乐");
list.add("百世快递");
list.add("百度翻译");
list.add("百度百科");
list.add("美国");
list.add("美元");
list.add("网易");
list.add("美团");
list.add("滴滴");
list.add("滴水");
list.add("小米");
list.add("小新");
list.add("OPPO");
list.add("三星");
list.add("花伤情犹在");
list.add("花朵");
//定义变量将匹配结果保存起来
String info = "";
//根据用户输入的内容语句数据库查询的结果进行比较
if (!"".equals(name)){
for (int i = 0; i < list.size(); i++) {
//toUpperCase()将字符串转大写 toLowerCase()将字符串转小写---》目的忽略搜索时的字符串大小写
if (list.get(i).indexOf(name.toUpperCase())>-1 || list.get(i).indexOf(name.toLowerCase())>-1){
if (i==list.size()-1){
info+=list.get(i);
}else {
info+=list.get(i)+",";
}
}
}
}
PrintWriter writer = response.getWriter();
writer.write(info);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
}
以上是关于Ajax实现搜索文本框自动联想功能的主要内容，如果未能解决你的问题，请参考以下文章
下拉框的搜索（有图，适用下拉选择内容较多，需要搜索，自动联想）
Vue移动端项目——搜索联想建议功能的实现（结合watch属性和使用lodash防抖节流）