这个筛选的问题好多出错了

这个筛选的问题好多出错了

http://img1.sycdn.imooc.com//climg/5f3395ce09f8150f14250523.jpg


(function(window,document){

     //定义一个方法

     const  methods  = {

        appendChild(parent,...children){

            children.forEach(el=>{

                parent.appendChild(el);

            })

        },

        $(selector,root=document){

            return root.querySelector(selector);

        },

        $$(selector,root=document){

            return root.querySelectorAll(selector);

        }

      

     }


      //D

     let D = function(option){

        //事件

       this._ck();

       this.el  = methods.$('.sel');

       this.lia = methods.$$('li',this.el);

       this.lis();

       this.bod = methods.$('body');

       this._non(this.el);

       this.sear();

       this.search();

     }

       

    //搜索框点击事件

    D.prototype._ck = function(){

       methods.$('.symbol').addEventListener('click',(e)=>{

             e.stopPropagation();

             

            if(this.el.style.display!=="block"){

                this.el.style.display="block";

            

            }else{

                this.el.style.display="none";

            }

            

          

       })

         

    }


    //点击空白消失

    D.prototype._non = function(e){

        document.onclick = function () {


            e.style.display = "none";

            

            }

       

    }

    

    //选择Li的值给输入框

    D.prototype.lis = function(){

        //遍历Li

        var that = this;

        that.inl =  methods.$('.searcT');

        that.input =  methods.$('.search');

        that.ser =  methods.$('.sel');

        that.elt = [];

        that.inl.onclick = function(e){

            e.stopPropagation();

        }


        this.lia.forEach((el,index)=>{

            el.onclick = function(){

            that.input.value = el.innerText;

            that.ser.style.display="none";

          }


          that.elt.push(el.innerText);

        })

        

       }

       //筛选搜索

    D.prototype.sear = function(){

        this.inl.addEventListener('input',()=>{

            this.search(this.inl.value,[...this.elt]);

        })

    }


    D.prototype.search  = function(key,items){

        return items.filter(item => {

            

            if(item.includes(key)){

               

                return item;

           }

       })

    }

    window.$D = D;   

})(window,document)

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>自定义下拉框</title>

  <link rel="stylesheet" href="./index.css">

</head>

<body>

  <div class="container">

    <div class="title">自定义下拉框</div>

    <div class="box">

    <input type="text" class="search" placeholder="未选择" disabled >

    <div class="symbol">∨</div>

    <div class="sel">

      <input type="text" class="searcT" placeholder="搜索" >

      <b>构建工具</b>

      <ul>

        <li>Babel</li>

        <li>Webpack</li>

        <li>Rollup</li>

      </ul>

      <b>前端框架</b>

      <ul>

        <li>Vue</li>

        <li>React</li>

        <li>Augest</li>

      </ul>

    </div>

   </div>

  </div>

   <script src="data.js"></script>

   <script src="index.js"></script>

   <script>

     

     const d = new $D(

        

     )

   </script>

</body>


</html>

  * {

    margin: 0;

    padding: 0;

    list-style-type: none;

    

  }

  body{

    width:100%;

    height:100%;

  }


  .container {

    position: relative;

     text-align: center;

     width:100%;

     height:500px;

     display: flex;

     flex-direction: column;

     justify-content: center;

     align-items: center;

   

  }


  .title {

    font-size: 30px;

    color: aqua;

  }


  .search {

    border:1px solid #666;

    margin-top: 30px;

    width: 300px;

    height: 30px;

    outline: none;

    border-radius: 5px;

    padding-left:10px;

    

  }

  

  .box{

    position: relative;

  }

  .symbol{

    position: absolute;

    width:50px;

    height:32px;

    right:0px;

    top:30px;

    background-color:blue;

    color:white;

    border-radius: 5px;

    line-height: 34px;

    cursor:pointer;

  }

  

  .sel{

     position: absolute;

     width:300px;

     height:200px;

     border:1px solid black;

     border-radius: 5px;

     overflow-y:scroll;

     text-align: left;

     display: none;

    

   

  }

  .searcT{

    margin:1px 1px 1px 1px;

    width:270px;

    height:26px;

    border-radius: 5px;

    border:1px solid #666;

    padding-left:5px;

  


  }

  .sel b{

    margin-left: 5px;

  }

  .sel ul  li{

    font-size:14px;

    text-indent: 20px;

  }

  .sel ul li:hover{

    background-Color:red;

  }

筛选功能哪里还需要修改吗
小杨同学呀 2020-08-12
源自：项目：ES6实现图片切换特效   3-2 项目作业
41
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

6回答
好帮手慕星星 2020-08-13 17:57:31

同学你好，是filter方法中定义的参数，代表的意思如下，可以参考文档：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

http://img1.sycdn.imooc.com//climg/5f350e56092fa33607890411.jpg

参数名称自定义，不是固定的，但是每个位置参数代表的意思是固定的。

祝学习愉快！

0
收起回答
好帮手慕星星 2020-08-13 17:24:00

同学你好，可以输出看看items，是数组，里面有每项内容

http://img1.sycdn.imooc.com//climg/5f3505b909f56a1e07570029.jpg

而filter()方法中第一个参数代表的意思是数组中每项内容，所以item的值为每一项

http://img1.sycdn.imooc.com//climg/5f35061709feeed701800204.jpg

然后每一项中使用includes判断是否包含输入的字符。

自己再理解下，祝学习愉快！

0
收起回答
  • 提问者 小杨同学呀 #1
    Items.filter(item.index) 这里面的item并没有传入参数啊？ 难道item代表的就是前面的items的值吗
    2020-08-13 17:27:16
好帮手慕星星 2020-08-13 11:54:53

同学你好，第一次粘贴代码中includes的判断不需要删除，截图中是保留的

http://img1.sycdn.imooc.com//climg/5f34b9de093668d009680756.jpg

http://img1.sycdn.imooc.com//climg/5f34bb0d098879e503650171.jpg

http://img1.sycdn.imooc.com//climg/5f34bb1809ff304b03800125.jpg

添加上就可以了。祝学习愉快！

0
收起回答
  • 提问者 小杨同学呀 #1
    老师，items.filter((item,index) 这个函数里面的item我没明白 他起到什么作用
    2020-08-13 13:14:05
提问者 小杨同学呀 2020-08-13 09:28:40

(function(window,document){

     //定义一个方法

     const  methods  = {

        appendChild(parent,...children){

            children.forEach(el=>{

                parent.appendChild(el);

            })

        },

        $(selector,root=document){

            return root.querySelector(selector);

        },

        $$(selector,root=document){

            return root.querySelectorAll(selector);

        }

      

     }


      //D

     let D = function(option){

        //事件

       this._ck();

       this.el  = methods.$('.sel');

       this.lia = methods.$$('li',this.el);

       this.lis();

       this.bod = methods.$('body');

       this._non(this.el);

       this.sear();

       //this.search();

     }

       

    //搜索框点击事件

    D.prototype._ck = function(){

       methods.$('.symbol').addEventListener('click',(e)=>{

             e.stopPropagation();

             

            if(this.el.style.display!=="block"){

                this.el.style.display="block";

            

            }else{

                this.el.style.display="none";

            }

            

          

       })

         

    }


    //点击空白消失

    D.prototype._non = function(e){

        document.onclick = function () {


            e.style.display = "none";

            

            }

       

    }

    

    //选择Li的值给输入框

    D.prototype.lis = function(){

        //遍历Li

        var that = this;

        that.inl =  methods.$('.searcT');

        that.input =  methods.$('.search');

        that.ser =  methods.$('.sel');

        that.elt = [];

        that.inl.onclick = function(e){

            e.stopPropagation();

        }


        this.lia.forEach((el,index)=>{

            el.onclick = function(){

            that.input.value = el.innerText;

            that.ser.style.display="none";

          }


          that.elt.push(el.innerText);

        })

        

       }

       //筛选搜索

    D.prototype.sear = function(){

        this.inl.addEventListener('input',()=>{

            this.search(this.inl.value,[...this.elt]);

        })

    }


    D.prototype.search  = function(key,items){

          

        for(var i=0;i<this.lia.length;i++){

           

            this.lia[i].style.display="none";

        }

        items.filter((item,index)=>{

            console.log(item)

            this.lia[index].style.display="block";

        })

    }

    window.$D = D;   

})(window,document)


<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>自定义下拉框</title>

  <link rel="stylesheet" href="./index.css">

</head>

<body>

  <div class="container">

    <div class="title">自定义下拉框</div>

    <div class="box">

    <input type="text" class="search" placeholder="未选择" disabled >

    <div class="symbol">∨</div>

    <div class="sel">

      <input type="text" class="searcT" placeholder="搜索" >

      <b>构建工具</b>

      <ul>

        <li>Babel</li>

        <li>Webpack</li>

        <li>Rollup</li>

      </ul>

      <b>前端框架</b>

      <ul>

        <li>Vue</li>

        <li>React</li>

        <li>Augest</li>

      </ul>

    </div>

   </div>

  </div>

   <script src="data.js"></script>

   <script src="index.js"></script>

   <script>

     

     const d = new $D(

        

     )

   </script>

</body>


</html>


  * {

    margin: 0;

    padding: 0;

    list-style-type: none;

    

  }

  body{

    width:100%;

    height:100%;

  }


  .container {

    position: relative;

     text-align: center;

     width:100%;

     height:500px;

     display: flex;

     flex-direction: column;

     justify-content: center;

     align-items: center;

   

  }


  .title {

    font-size: 30px;

    color: aqua;

  }


  .search {

    border:1px solid #666;

    margin-top: 30px;

    width: 300px;

    height: 30px;

    outline: none;

    border-radius: 5px;

    padding-left:10px;

    

  }

  

  .box{

    position: relative;

  }

  .symbol{

    position: absolute;

    width:50px;

    height:32px;

    right:0px;

    top:30px;

    background-color:blue;

    color:white;

    border-radius: 5px;

    line-height: 34px;

    cursor:pointer;

  }

  

  .sel{

     position: absolute;

     width:300px;

     height:200px;

     border:1px solid black;

     border-radius: 5px;

     overflow-y:scroll;

     text-align: left;

     display: none;

    

   

  }

  .searcT{

    margin:1px 1px 1px 1px;

    width:270px;

    height:26px;

    border-radius: 5px;

    border:1px solid #666;

    padding-left:5px;

  


  }

  .sel b{

    margin-left: 5px;

  }

  .sel ul  li{

    font-size:14px;

    text-indent: 20px;

  }

  .sel ul li:hover{

    background-Color:red;

  }


0
收起回答
好帮手慕星星 2020-08-13 09:27:48

同学你好，可以将自己修改过后的代码粘贴上来，老师帮助测试。

0
收起回答
  • 提问者 小杨同学呀 #1
    粘贴到上面了，老师看一下
    2020-08-13 09:29:09
好帮手慕星星 2020-08-12 15:59:05

同学你好，报错是search方法中filter筛选的问题。这是因为search方法在没有输入内容的时候提前调用了，可以注释掉

http://img1.sycdn.imooc.com//climg/5f33a103095ec28205370165.jpg

另外，筛选的内容不需要返回，可以获取索引，将对应的li展示，其余的隐藏。参考

http://img1.sycdn.imooc.com//climg/5f33a13f09639d9610040791.jpg

自己再测试下，祝学习愉快！

0
收起回答
  • 提问者 小杨同学呀 #1
    没有效果啊，不会筛选
    2020-08-13 09:18:25
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

B选项有个疑问
67 2 10
子元素筛选器
17 0 3
用 :parent 筛选器把 html 和 body 都选出来了
8 0 5
二次筛选报错
15 0 6
有几个问题请老师解答一下
28 0 3

登录后可查看更多问答，登录/注册

4.Vue与React高级框架开发
  • 参与学习           人
  • 提交作业       239    份
  • 解答问题       10739    个

本阶段带你深入前端开发的肌理，通过ES6基础知识和前端主流高级框架的学习，助你快速构建企业级移动webAPP应用，进入职场的终极battle

了解课程

本课精华内容

问答 作业

老师，这是关于stylus版本和style语法高亮问题解决（可以编辑器自动缩进）如可可行可以置顶，谢谢

115 1

老师,创建VUE环境花了一天时间，创建流程供同学们参考（window）如果方法可行可以置顶，谢谢

152 1

麻烦老师看看这个写法和注释可以吗?如果可以可以置顶一下参考,谢谢

83 1

请检查是否正确

95 1

transition问题-续

65 3

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师