Jquery实现搜索效果,进阶实战篇

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

一,使用点击事件调用后台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里面的数据,这里就不写了,不懂可以私我;