模糊查询案例

案例-模糊查询

成品展示：

准备：

1. 一个数组用来存放需要查询的数据。
2. 一个搜索框用来输入进行模糊查找
3. 事件均用事件监听的方式【addEventListener】

案例思路：

1. 建立一个输入框，创建键盘按键弹起事件【keyup】;当输入内容包含在查询数据的时候就将符合条件的内容以列表的形式展示在另一个盒子里。

2. 对数组进行遍历【forEach】,利用字符串的indexOf()方法的负值来判断输入的值是否符合条件；

3. 如果上述中输入的内容在上述步骤返回-1;就说明当前输入内容不符合条件;否则就是符合将符合的内容以字符串拼接的方式拼接起来

4. 最后用innerHTML方法将字符串赋值给文档中的ul标签下;

关键步骤如下：

1. 数组名称为Info;存放数据如标题2所示

2. var info = [
               "河南嵩县",
               "河南平顶山",
               "百度app",
               "百度贴吧",
               "百度识图",
               "百度网盘" ,
           ];   //因数据过多只展示部分内容
   

3. 对数组遍历如4所示；遍历出来的值和输入内容inp.value比较

4. info.forEach((value) => {
           var num = value.indexOf(inp.value);
               if (num !== -1) {
                  str += "<li>" + value + "</li>";
              }
           })   
   

5. 判断输入是否符合条件；若符合如6所示

6.  list.innerHTML = str;
   

7. 若不符合则如8所示：

8.  list.innerHTML = "";
   

代码改进：

查询到的内容可以实现逐行变色功能【利用事件的冒泡来实现】

这个用到了之前的**添加元素后改变背景**

核心代码如下：

  list.addEventListener("mouseover", function () {   //鼠标移入事件
                    var target = event.target;
                    var sibs = siblings(target);     //调用冒泡的派他思想siblings
                    sibs.forEach(function (val) {
                        val.style.backgroundColor = "";
                    })
                    target.style.backgroundColor = "pink";
                });

封装一段函数siblings实现兄弟间的排他

 function siblings(ele) {    //封装函数让其他兄弟排除  [用来为冒泡事件派他思想]
            var arr = [];
            var father = ele.parentNode;
            for (var i = 0; i < father.children.length; i++)             {
                arr.push(father.children[i]);
            }
            return arr;
        }

改进2：

1. 当鼠标点击空白文档时，让显示出来的内容隐藏；

2. 鼠标再点进去的时候当有内容的时候让内容显示出来;若没有内容咋不显示。

3. 这两个事件涉及到了冒泡部分的知识;当点击输入框的时候同时会因为冒泡的原因触发的上层祖宗元素document,而document点击事件里面书写了与输入框点击事件相反的事件,当点击输入框的时候同时触发document;这样就导致输入框点击事件失效；

4. 解决办法：让输入框取消冒泡事件;用事件队对象event的stopPropagation()方法；

5. 防止冒泡代码前

    inp.addEventListener("click", function () {
               common(this);         
           });
           document.addEventListener("click", function            {
               conBom.style.display = "none";
               console.log(123);   
         });
   

6. 防止冒泡代码：

   event.stopPropagation()
   

完整代码如下：

html

 <div class="con-main">
        <input type="text" id="inp">
        <input type="button" value="搜索" id="btn">
        <div class="con-bom">
            <ul id="list"></ul>
        </div>
    </div>

css

      * {
            margin: 0;
            padding: 0;
        }

        .con-main {
            width: 350px;
            padding: 0 20px;
            margin: 20px auto;

        }

        .con-bom {
            /* display: none; */
            margin-top: -1px;
            width: 250px;
            border: 1px solid #ccc;
            border-top: none;
        }

        #inp {
            outline: none;
            /* 去除表单默认样式 */
            border: 1px solid #ccc;

            width: 250px;
            height: 25px;
        }

        #btn {
            width: 55px;
            height: 28px;
        }

        li {
            list-style: none;
            height: 18px;
            line-height: 18px;
            padding: 5px 0;
            width: 250px;
            cursor: pointer;
        }

js

 function siblings(ele) {    //封装函数让其他兄弟排除  [用来为冒泡事件派他思想]
            var arr = [];
            var father = ele.parentNode;
            for (var i = 0; i < father.children.length; i++)             {
                arr.push(father.children[i]);
            }
            return arr;
        };
        var info = [
            "河南嵩县",
            "河南平顶山",
            "百度app",
            "百度贴吧",
            "百度识图",
            "百度网盘",
            "百度热搜榜",
            "百度地图",
            "百度知道",
            "百度图片",
            "百度一下首页",
            "动物森友会",
            "动物界潜水冠军之称的是",
            "动物管理局",
            "动物繁殖",
            "动物世界",
            "动物胶配方视频",
            "动物狂想曲",
            "动物之森",
            "动物语言翻译器",
            "动物奶油",
            "世界名表排行榜",
            "世界顶尖的暗杀者转生为异世界贵族",
            "世界地图",
            "世界大学排行榜2021最新排名",
            "世界上最恐怖的肌肉女",
            "世界上最大的树叶",
            "世界电影史上第一部有声电影是1927年上映的",
            "世界疫情",
            "世界大学排名",
            "世界500强企业排名(2021最新名单)",
            "疫情最新数据消息",
            "疫情中高风险地区最新名单",
            "疫情地图",
            "疫情最新情况",
            "疫情什么时候开始的",
            "江苏南京疫情发布会",
            "疫情实时",
            "疫情最新消息今天",
            "疫情实时动态",
            "疫情什么时候才能彻底结束",
        ];

        var inp = document.getElementById("inp");
        var conBom = document.querySelector(".con-bom");
        var list = document.getElementById("list");


        inp.addEventListener("keyup", function () {
            common(inp);

        }, false);

        function common(parms) {
            conBom.style.display = "block";
            parms.style.borderColor = "lightBlue";
            conBom.style.borderColor = "lightBlue";
            var str = "";
             info.forEach((value) => {
                 var num = value.indexOf(inp.value);
                 if (num !== -1) {
                    str += "<li>" + value + "</li>";
                 }
            });    
            if (parms.value.trim() == "") {
                list.innerHTML = "";
                parms.style.borderColor = "#ccc";  //如果内容为空的话，也是恢复之前的颜色
            } else {
                list.innerHTML = str;
                list.addEventListener("mouseover", function () {   //鼠标移入事件
                    var target = event.target;
                    var sibs = siblings(target);     //调用冒泡的派他思想siblings
                    sibs.forEach(function (val) {
                        val.style.backgroundColor = "";
                    })
                    target.style.backgroundColor = "pink";
                });
            }
        };

        list.addEventListener("mouseout", function () {   //      鼠标离开事件
            var target = event.target;
            target.style.backgroundColor = "";        //鼠标      离开后颜色取消
        });

        inp.addEventListener("click", function (event) {
            common(this);
            event.stopPropagation();
        });

        document.addEventListener("click", function () {
            conBom.style.display = "none";
            console.log(123);
        });

写在最后：

上面用indexOf()方法来筛选内容；也可以用includes方法来筛选内容

下面来写一下用includes方法来实现筛选

1. 用数组的filter方法遍历数组；

2. 在filter返回值部分用includes方法筛选数组里面的每一个内容；

3. 筛选如下:

4. var newInfo = inFo.filter(function(val) {
   	return val.includes(inp.value);
   })
   

5. 将返回的新数组信息也就是最新的全部符合条件的数组遍历；用一个字符串来接收他

6. newInfo.forEach(function(val) {
       str+=val;
   })
   

7. 最后将这个符合条件的字符串用innerHTML方法插入到ul标签中。