前言

由于没有使用数据库，联想数据是通过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实现搜索文本框自动联想功能

前言

效果

代码

相关文章

热门标签

最新文章

目录