根据输入框输入的内容模糊搜索列表项(不调后端接口)

本文介绍如何在前端实现输入框的模糊搜索功能,不依赖后端接口。通过JavaScript处理,当用户在输入框中输入内容时,动态过滤并显示匹配的列表项。
摘要由CSDN通过智能技术生成

根据输入框输入的内容模糊搜索列表项(不调接口)。

html:页面结构为一个输入框和一个列表。
js:

//模糊搜索

$("#input").keyup(function() {
    var inputValue = $(this).val();
    var arr=[];
    $.each(dataArr, function(index,val) {
        if (val.text.indexOf(inputValue.trim()) !== -1) { ==//关键句==
            arr.push(val);
        }
    });
    treeRenderFun(arr, '#list');
});

//树渲染

function treeRenderFun(ele, obj) {
    if (ele) {
       //权限树
       $.fn.zTree.init($(obj), settingPrivilege, ele);
    }
}

//树设置

var settingPrivilege = {
    view: {
        showIcon: false  //不显示图标
    },
    callback: {
        onCheck: zTreeOnCheck
    },
    check: {
        enable: true,
        chkStyle: "checkbox",
        autoCheckTrigger: true
    },
    data: {
        key: {
            name: "name" //要显示的内容对应的字段名
        },
        simpl
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值