列表搜索

效果如下所示：

效果说明：

1. 搜索项匹配到一级标题，显示一级标题和其所有的二级标.
2. 搜索项没有匹配到一级标题，就开始匹配其二级标题，匹配到，就显示一级标题，和具体的二级标题，该一级标题的二级标题不显示.

上代码:

1. 方法一：原生的JS实现，初步有点繁琐，但是还是实现了，后期再进行优化与改进吧

body {
            user-select:none;
        }
        .wrap ul {
            padding-left: 10px;
        }
        input {
            margin-left: 20px;
        }
        .hide {
            display: none;
        }

<div>
        <input type="text" placeholder="请输入">
        <ul class="wrap">
            <li>
                <div class="item">我的工作台</div>
                <ul class="hide">
                    <li>工作列表</li>
                </ul>
            </li>
            <li>
                <div class="item">订单管理</div>
                <ul class="hide">
                    <li>发票管理</li>
                    <li>订单管理</li>
                    <li>订单查询</li>
                    <li>订单查询</li>
                    <li>订单查询</li>
                    <li>订单查询</li>
                    <li>订单查询</li>
                    <li>订单查询</li>
                </ul>
            </li>
            <li>
                <div class="item">商品管理</div>
                <ul class="hide">
                    <li>商品列表</li>
                    <li>商品查询</li>
                </ul>
            </li>
        </ul>
    </div>

var uls = document.querySelectorAll('.wrap ul');
        var items = document.querySelectorAll('.item');
        var input = document.querySelector('input');

        var firstMenu = [];
        var secMenu = [];

        //点击显示
        Array.from(items).forEach((v,i)=>{

            v.addEventListener('click',()=>{
                uls[i].classList.toggle('hide');
            })

            firstMenu.push(v.innerText);
        })
        
        //搜索显示
        // 1. 匹配到一级菜单，就不筛选子菜单，直接显示所有
        // 2. 没有匹配到一级菜单，开始匹配二级菜单，就将匹配到的li显示，其他li隐藏

        // 方法1:
        // 1. 将所有功能都存储在数组中 firstMenu
        // 2. 将一级标题放在一个数组，二级标题放一个数组 secMenu
        input.addEventListener('input',()=>{

            firstMenu.forEach((v,i)=>{
                if(input.value.trim()){
                    //一级菜单比较
                    items[i].parentNode.classList.add('hide');
                    if(v.indexOf(input.value)>-1){
                        items[i].parentNode.classList.remove('hide');
                        items[i].nextElementSibling.classList.remove('hide');
                        Array.from(items[i].nextElementSibling.children).forEach((v,i)=>{
                            v.classList.remove('hide');
                        })

                    }
                    //二级菜单比较
                    if(items[i].parentNode.classList.contains('hide')){
                        secMenu = Array.from(items[i].nextElementSibling.children);
                        secMenu.forEach((v,i)=>{
                            if(v.innerText.indexOf(input.value)>-1){
                                v.classList.remove('hide');
                                v.parentNode.parentNode.classList.remove('hide');
                                v.parentNode.classList.remove('hide');

                            }else{
                                //将没有匹配上的li隐藏
                                v.classList.add('hide');
                            }
                        })
                    }
                }else{
                    //清空input，将类还原到初始状态
                    items[i].parentNode.classList.remove('hide');
                    items[i].nextElementSibling.classList.add('hide');
                    Array.from(items[i].nextElementSibling.children).forEach((v,i)=>{
                        v.classList.remove('hide');
                    })
                }
                
            })
        })