使用jQuery的autocomplete实现数据查询一次,联想自动补全

书接上回,上次说到在jsp页面中,通过监听输入框的数值变化,实时查询数据库,得到返回值使用autocomplete属性自动补全,实现一个联想补全辅助操作,链接:使用jquery的autocomplete属性实现联想补全操作-CSDN博客

但是这种方法对数据库压力太大,这次通过改造,实现了页面初始化时将需要补全的全部信息查出放在页面,页面上的补全操作相当于使用本地数据联想补全,大大减轻了数据库压力。

由于是页面初始化时就将返回值放入域中,首先是后台代码:

@RequestMapping(value = "/init")
    public String init(ModelMap map, HttpServletRequest request, HttpServletResponse response) {
        List<AutoCode> autoList = autoService.getCodeList();

        String exchange = JSON.toJSONString(certificateList);
        certificateList = JSON.parseArray(exchange, CertificateCode.class);
        StringBuilder rtnData = new StringBuilder();
        for (AutoCode auto: autoList ){
            rtnData.append(",{'code':'").append(auto.getCode()).append("','name':'").append(auto.getName()).append("'}");
        }
        String rtn = "["+rtnData.toString().substring(1)+"]";
        map.put("autocomplete",rtn);
        return "rtn/autocomplete";

    }

上述代码中掺杂了些个人业务,重点就在于里面那个for循环,核心思路就是,将返回值做成一个json串返回前端,json串格式都是统一的:{’名称’:‘内容’,‘名称’:‘内容’......},我这里做成了每条数据都是代码+内容,业务根据个人来实现即可。

前端代码:

//引用autocomplete的js文件 ,css文件就不做展示了
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.autocomplete.js" charset="U-8"></script>
    <%
        //EL表达式获取后台传回的需要自动补全的内容
        String autocomplete = (String) request.getAttribute("autocomplete");
    %>
    <script type="text/javascript">

//页面自动补全的核心方法
        $(document).ready(function () {
            var autocomplete = <%=autocomplete%>;
            $("#auto").autocomplete(
                autocomplete,
                {
                    //方法属性在上一版文章中有详解
                    minChars: 1,
                    max:10,
                    width: 300,
                    matchContains: true,
                    autoFill: false,
                    //拼装json中的代码与值
                    formatItem:function(item) {
                        return "["+item.code+"]\""+item.name+"\"";
                    },
                    formatMatch: function(row, i, max) {
                        return row.name+ " " + row.code;
                    },
                    formatResult: function(row) {
                        return row.name;
                    }
                }).result(function(event,data,formatted){
                $("#auto").val("");
                if(data!=null && data!=''){
                    $("#auto").val(data.code);
                }
            });
        });

前端的实现实际上就是一个纯页面操作,后台返回前端的数据可以看做是页面写死的数据,这个autocomplete方法直接拿来使用,例如:

 String autocomplete = (String) request.getAttribute("autocomplete");


将上述代码替换为写死的串:
var autocomplete = [{'zsdm':'01','zsmc':'一元二次方程'},{'zsdm':'012','zsmc':'99A坦克'},{'zsdm':'123','zsmc':'hellword'}];

最终实现效果为:

此时便完成了对初始的,监听输入框内容改变实时查询数据库实现自动补全的改造。后台拿到全部的补全信息放到前端,剩余操作便由前端autocomplete属性自动完成。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/469622.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++--STL标准库

一.模板 模板是C中泛型编程的基础。一个模板就是一个创建类或函数的蓝图。 生活中常见的模板有: 编写一个比较两个值大小的函数&#xff0c;如果第一个值大于第二个值返回大于0的数字,两个值相等返回0,第一个值小于第二个值返回小于0的数字。 我们可以根据值类型定义多个函数&…

2024年阿里云服务器搭建幻兽帕鲁游戏_保姆级教程

玩转幻兽帕鲁服务器&#xff0c;阿里云推出新手0基础一键部署幻兽帕鲁服务器教程&#xff0c;傻瓜式一键部署&#xff0c;3分钟即可成功创建一台Palworld专属服务器&#xff0c;成本仅需26元&#xff0c;阿里云服务器网aliyunfuwuqi.com分享2024年新版基于阿里云搭建幻兽帕鲁服…

SecureCRT出现乱码的解决方法

SecureCRT是一个商业终端连接工具&#xff0c;它支持多种自定义设置。默认设置下&#xff0c;通过SecureCRT连接SSH服务器可能出现中文乱码的情况。这是由于SecureCRT字符编码与服务器的字符编码不一致造成的。 当然解决这个问题也很简单&#xff0c;将SecureCRT字符编码设置成…

深入探讨Python中的文件操作与文件IO操作【第141篇—Python实现】

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 深入探讨Python中的文件操作与文件IO操作 在Python编程中&#xff0c;文件操作和文件IO操作…

计算机缺失msvcp110.dll如何修复,多种修复方法教给你

当电脑系统中msvcp110.dll文件丢失时&#xff0c;可能会对计算机的正常运行产生一系列显著的影响。msvcp110.dll是Microsoft Visual C Redistributable Package的一部分&#xff0c;这个动态链接库文件对于许多基于Windows的应用程序至关重要&#xff0c;尤其是一些使用C编译器…

干货整理!火石控股创始人吴渔夫的 AI 游戏思维20条

近日&#xff0c;在一场面对面的直播中&#xff0c;自媒体「极新」创始人姜稳与火石控股创始人、奇酷网络董事长吴渔夫进行视频对话中&#xff0c;探讨了AI技术对游戏行业的新机遇和新挑战。 中国网游先锋&#xff0c;火石控股创始人&#xff0c;奇酷网络董事长吴渔夫认为&…

【亲测】Onlyfans年龄认证怎么办?Onlyfans需要年龄验证?

1. 引言 什么是OnlyFans&#xff1a;OnlyFans是一种内容订阅服务&#xff0c;成立于2016年&#xff0c;允许内容创作者从用户那里获得资金&#xff0c;用户需要支付订阅费用才能查看他们的内容。它在多个领域受到欢迎&#xff0c;包括音乐、健身、摄影&#xff0c;以及成人内容…

万众期待,催更5年,《码农翻身2》强势来袭!!!

转眼间&#xff0c;距离《码农翻身》的出版已经过了5 年时间&#xff0c;很多读者催问&#xff1a;“什么时候出《码农翻身2》&#xff1f;我已经等不及了&#xff01;”“疫情都结束了&#xff0c;《码农翻身2》在哪儿&#xff1f;”…… 现在《码农翻身2》终于来了&#xff…

靠谱且性价比高的随身WiFi推荐!买随身WiFi应该注意什么?最全攻略,新手必看

一、哪些人更适合使用随身WiFi呢&#xff1f; 1、【学生党】校园网太差&#xff0c;流量费太贵&#xff0c;没钱的学生党用个靠谱的随身WiFi挺不错的。 2、【户外工作者】货车司机、滴滴司机等。高峰期抢单没信号&#xff0c;空闲打发时间没流量&#xff0c;可以使用一个。 3…

改进YOLOv8注意力系列六:结合SEAttention轻量通道注意力、ShuffleAttention重排特征注意力模块、SimAM无参数化注意力

改进YOLOv8注意力系列五:结合ParNetAttention注意力、高效的金字塔切分注意力模块PSA、跨领域基于多层感知器(MLP)S2Attention注意力 代码SEAttention轻量通道注意力ShuffleAttention重排特征注意力模块SimAM无参数化注意力加入方法各种yaml加入结构本文提供了改进 YOLOv8注…

智能合约 之 部署ERC-20

Remix介绍 Remix是一个由以太坊社区开发的在线集成开发环境&#xff08;IDE&#xff09;&#xff0c;旨在帮助开发者编写、测试和部署以太坊智能合约。它提供了一个简单易用的界面&#xff0c;使得开发者可以在浏览器中直接进行智能合约的开发&#xff0c;而无需安装任何额外的…

Linux 进程管理工具top ps

概述 top 和 ps 是 Linux 系统中两个非常重要的用于管理和监控进程的命令工具。以下是它们的主要功能和区别&#xff1a; top&#xff1a; 动态视图&#xff1a;top 提供了一个实时动态更新的视图&#xff0c;能够持续显示系统中当前正在运行的进程信息及其资源占用情况。 系统…

2024-Spring IOC 和 AOP源码分析(上篇)

**前言&#xff1a;**笔者最近面了几次大厂。。。开局Spring源码暴击 之前看过忘了写篇总结。。。 1、介绍一下Spring 核心组件&#xff1a; 常用模块&#xff1a; 常用注解&#xff1a; 2、说一下SpringIOC原理 概念&#xff1a;Spring 通过一个配置文件描述 Bean 及 B…

Linux--Shell脚本安装 httpd 和 修改IP

shell脚本 关闭防火墙、安装httpd、启动httpd [rootnode11 ~]# mkdir shell[rootnode11 ~]# vim abc.sh #!/bin/bash#安装httpd服务#1、挂载 准备yum源 mount /dev/sr0 /mnt &> /dev/nulldf$(df -h | grep /dev/sr0 | awk {print $6})if [ "$df" "/mn…

Day61:WEB攻防-PHP反序列化原生类TIPSCVE绕过漏洞属性类型特征

知识点&#xff1a; 1、PHP-反序列化-属性类型&显示特征 2、PHP-反序列化-CVE绕过&字符串逃逸 3、PHP-反序列化-原生类生成&利用&配合 补充&#xff1a;如果在 PHP 类中没有实现某个魔术方法&#xff0c;那么该魔术方法在相应的情况下不会被自动触发。PHP 的魔…

Nacos学习笔记

Nacos官网 https://github.com/alibaba/nacos/releases https://www.bilibili.com/video/BV1q3411Z79z 1. Nacos介绍 Nacos是Dynamic Naming and Configuration Service的首字母简称&#xff0c;一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。 在这个…

进销存管理完整方案:那些让人头疼的进销存难题及解决方法!

什么是进销存管理&#xff1f;为何进销存管理在企业管理中如此重要&#xff1f;进销存管理的核心模块包括哪些&#xff1f;为何企业在进销存管理中常常遭遇前后方协作不畅、数据不同步等痛点&#xff1f;又该如何针对进销存管理痛点进行优化&#xff1f;本文将从进销存管理的基…

python线性插值

假设有一个一维数组&#xff0c;但是此数组中只有部分位置上有值&#xff0c;其它位置数据缺失&#xff0c;现在想用线性插值的方法将其填充。 示例代码&#xff1a; import numpy as np# 假设你有一个长度为171的数组&#xff0c;名为full_data&#xff0c;其中有13个数据点…

matlab软件基础

第1讲 MATLAB初步 MATLAB是矩阵实验室&#xff08;Matrix Laboratory&#xff09;的简称&#xff0c;是美国MathWorks公司出品的商业数学软件&#xff0c;用于算法开发、数据可视化、数据分析以及数值计算的高级技术计算语言和交互式环境。MATLAB和Mathematica、Maple并称为三…

面试算法-51-翻转二叉树

题目 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1] 解 class Solution {public TreeNode invertTree(TreeNode root) {dfs(root);re…
最新文章