Jquery实现搜索效果,进阶实战篇_jquery实现搜索功能-程序员宅基地

技术标签: 前端  jquery  javascript  

首先,我们实现搜索效果的思路

一,使用点击事件调用后台api数据参数实现搜索;

(1)这个其实是最简单的,因为调取后台api我们需要填参数,(有的不需要填,需要在后台重新写sql语句);而这个参数的值,就是我们输入文本框的内容,然后点击事件触发这个获取api的函数;

二,使用jquery显示隐藏效果实现搜索,把我们要搜索的字段显示,而其他的就隐藏;

js:代码

       // 这个id是你点击搜索的id,
       //input2是你需要搜索字段的文本框的id
       //这个income_list_li是你搜索的内容的范围;
        $("#search").click(function() {
       //声明一个常量
            const keyword = $.trim($("#input2").val());
            $('.income_list_li').each(function () {
                const text = $(this).text();
              //循环查找
                if (keyword) {
                    if (new RegExp(keyword.toLowerCase()).test(text.toLowerCase())) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                } else {
                    $(this).show();
                }
            });
        })

方法一和二都可以实现搜索效果,但是我们实际运用的需要用第一个方法,因为或许api接口数据,不能把全部数据同时展示,也许我们只获取前二十个,然后剩下的用分页展示,那么你搜索只能搜索前面二十个里面存在的数据,非常的不理智啊,所以我们得用第一个方法,说白了就是,用改变参数获取api里面的数据,这里就不写了,不懂可以私我;

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45957302/article/details/125171666

智能推荐

基于python的信用卡评分模型_python 信用 评分卡模型-程序员宅基地

文章浏览阅读4.4w次,点赞45次,收藏418次。基于python的信用卡评分模型1. 项目背景介绍1.1 信用风险和评分卡模型的基本概念 信用风险指的是交易对手未能履行约定合同中的义务造成经济损失的风险,即受信人不能履行还本付息的责任而使授信人的预期收益与实际收益发生偏离的可能性,它是金融风险的主要类型。 借贷场景中的评分卡是一种以分数的形式来衡量风险几率的一种手段,也是对未来一段时间内违约、逾期、失联概率的预测。一般来说..._python 信用 评分卡模型

linux 下 tcpdump 详解 前篇(libpcap库源码分析)_libcap 源码-程序员宅基地

文章浏览阅读1.7k次,点赞3次,收藏22次。一 概述用简单的话来定义tcpdump,就是:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具。 至于tcpdump参数如何使用,这不是本章讨论的重点。liunx系统抓包工具,毫无疑问就是tcpdump。而windows的抓包工具,wireshark也是一款主流的抓包工具。wireshark 使用了winpcap库。tcpdump..._libcap 源码

http://mirrors.aliyun.com/epel/6/x86_64/repodata/repomd.xml: [Errno 14] PYCURL ERROR 22 --程序员宅基地

文章浏览阅读6.5k次,点赞14次,收藏11次。http://mirrors.aliyun.com/epel/6/x86_64/repodata/repomd.xml: [Errno 14] PYCURL ERROR 22 - “The requested URL returned error: 404 Not Found”Trying other mirror.Error: Cannot retrieve repository metadata (repomd.xml) for repository: epel. Please verify its_/epel/6/x86_64/repodata/repomd.xml: [errno 14] pycurl error 22 - "the reques

Audio System 九 之 AudioTrack_audiotrackserverproxy-程序员宅基地

文章浏览阅读1k次。Audio System 九 之 AudioTrack十四、AudioTrack & AudioFlinger 相关类14.1 AudioTrack & AudioFlinger 的类图14.1.1 AudioFlinger::PlaybackThread 回放线程基类14.1.2 AudioFlinger::PlaybackThread::Track 音频流管理类14.1...._audiotrackserverproxy

Redis 通用命令(keys,help,mset,exists,expire,ttl,tab补全)_redis如何添加help命令-程序员宅基地

文章浏览阅读874次。redis 通用命令 _redis如何添加help命令

google chromeDriver 地址

chrome driver 下载地址。#chrome brower下载地址。#安装openssl 1.1.1K。#安装chrome driver。#安装browser。

随便推点

实现RTSP摄像机进行网页直播和微信直播的技术方案:EasyNVR版本免费更新方法_easynvr免费版-程序员宅基地

文章浏览阅读2.7k次。问题背景前文我们提过为保障服务器正常稳定运作,EasyNVR有专业的运维(售前支撑、商务咨询、售后维护)团队,随时对客户各种突发情况快速响应处理,保证互联网直播的顺利进行。这部分工作就包括技术问题咨询、需求分析、方案制定、版本更新、功能提升等,随着用户基数的增加,运维过程中或多或少存在一些回复延迟,主要包括以下几个方面:EasyNVR的用户越来越多,技术人员一一对应解答效率不高;随着Eas..._easynvr免费版

P1541 [NOIP2010 提高组] 乌龟棋 题解_乌龟棋2010-程序员宅基地

文章浏览阅读401次,点赞3次,收藏4次。更好的阅读体验蒟蒻的第一篇题解P1541 [NOIP2010 提高组] 乌龟棋简单的背包 首先确定状态,dp[a][b][c][d]用来存储使用a张爬行卡片1,b张爬行卡片2,c张爬行卡片3,d张爬行卡片4时的最大得分。 我们需要开一个桶的数组t存4种牌的个数,以便于暴力。 dp数组初始化。很显然,四种卡片都用0张时,在起点,分数为score[1] 即: dp[0][0][0][0]=score[1]; 状态转移。DP 4种卡片的个数,状态转移方程为_乌龟棋2010

计算机网络 | 划分子网_计算机网络子网划分-程序员宅基地

文章浏览阅读5.5k次,点赞11次,收藏69次。划分子网概念先知了解 什么是子网?了解 为什么要划分子网?划分子网的好处/优点是什么?介绍 子网掩码总结 子网掩码记住 IP 地址的自然分类问题求解一个网络,主机号有x位,则这个网络可以分配给主机的IP地址有多少个?子网划分实例问题1题目分析题目解题方法参考内容概念先知了解 什么是子网?子网或子网络是网络内部的网络。子网使网络更高效。通过子网划分,网络流量传播距离更短,无需通过不必要的路由器即可到达目的地。了解 为什么要划分子网?划分子网的好处/优点是什么?1.减少广播带来的负面影响2.节_计算机网络子网划分

Java利用JNA调用C#的dll-程序员宅基地

文章浏览阅读7.3k次,点赞2次,收藏23次。https://www.cnblogs.com/wyongbo/p/jnaTest.html本文参考以上链接,结合自己实际遇到的问题,做过一些修改(红色字体标注),主要是为了给自己做个笔记。一、需求阐述:  如果我们的项目利用c#开发,到了开发后期需要和java组进行合作,其中有一部分业务逻辑利用c#已经code completed,那么我们可能会考虑用java来调用现成的c#dll实...

linux查看系统编码和修改系统编码的方法_linux 机器编码设置-程序员宅基地

文章浏览阅读1.4w次。查看支持的字符编码使用locale命令,如:. 代码如下:# localeLANG=en_US.UTF-8LC_CTYPE="en_US.UTF-8"LC_NUMERIC="en_US.UTF-8"LC_TIME="en_US.UTF-8"LC_COLLATE="en_US.UTF-8"LC_MONETARY="en_US.UTF-8"LC_MESSAG_linux 机器编码设置

企业微信小程序_小程序开发工具及真机调试_host配置及代理_微信开发者工具 本地代理-程序员宅基地

文章浏览阅读7.6k次。文章目录一、开发前准备1. 开发文档2. 工具安装3. 安装插件4. 调整编译模式5. 选择企业6. PC 调试前端7. PC 调试后端二、甄姬调试前端2.1. 预览小程序2.2. 手机企微扫码2.3. 手机企微调试2.4. 多场景调试2.5. 手机企微调试前后端一、开发前准备1. 开发文档小程序开发文档:https://developer.work.weixin.qq.com/document/path/91502点击企业微信小程序开发进入详情页面2. 工具安装微信开发者工具3. ._微信开发者工具 本地代理