原生JS案例——搜索框的搜索数据展示

一、主要功能介绍：1、生成UI结构，定义一个数组2、获取表单元素3、创建搜索框的键盘弹起事件4、当在搜索框中输入内容时，遍历数组中的每一个元素，将其中的每一个元素与输入框中输入的元素相匹配，如果能匹配上就将该内容渲染到提示列表中5、如果输入内容，显示提示列表，如果没输入内容，隐藏提示列表6、通过trim() 去掉左右两边的空格，因为空格能匹配所有字符。

周百万.

3215人浏览 · 2022-10-11 13:17:18

周百万. · 2022-10-11 13:17:18 发布

一、主要功能介绍：

1、生成UI结构，定义一个数组

2、获取表单元素

3、创建搜索框的键盘弹起事件

4、当在搜索框中输入内容时，遍历数组中的每一个元素，将其中的每一个元素与输入框中输入的元素相匹配，如果能匹配上就将该内容渲染到提示列表中

5、如果输入内容，显示提示列表，如果没输入内容，隐藏提示列表

6、通过trim() 去掉左右两边的空格，因为空格能匹配所有字符

二、详细步骤解析：

HTML和CSS代码：

主要练习js不用写的太花里胡哨

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            width: 400px;
            height: 600px;
            margin: 50px auto;
        }
        
        .container #val {
            padding-left: 20px;
            width: 260px;
            height: 30px;
            outline: none;
        }
        
        #btn {
            width: 60px;
            height: 33px;
        }
        
        .show {
            display: none;
            width: 283px;
            /* height: 400px; */
            border: 1px solid #ccc;
        }
        
        .show p {
            height: 30px;
            margin-left: 10px;
            margin-top: 5px;
            margin-bottom: 5px;
        }
    </style>
</head>

<body>
    <div class="container">
        <input type="text" id="val" placeholder="搜索">
        <input type="button" value="按钮" id="btn">
        <div class="show"></div>
    </div>

JS代码：

这个才是重点，有些部分是用的ES6中的语法，箭头函数 let 等，因为这是趋势，所以大家多多练习

箭头函数 : ( ) => { } 和函数 function( ){ } 基本是一样的

let 和 var 也基本是一样的， let有局部变量，不能重复定义相同变量等特点

里面的注释很详细，有疑问欢迎评论！respect！！！！

<script>
        let str = "";
        //定义一个数组，指直接在数组中定义元素，以后学完Ajax就能在服务器中请求数据，这里只是练习
        let arr = ["华为手机", "apple手机", "手表", "手电筒", "小米手机", "oppo手机", "平板电脑", "三星手机", "手机支架", "手套"]
            // 当在输入框中按下键的时候，显示扩展的词
        var val = document.querySelector("#val");
        var show = document.querySelector(".show");
        val.onkeyup = function() {
            // 每次获取时先清空里面原有的，否则会重复
            str = "";
            show.style.display = "block";
            // 获取里面的数据
            var value = val.value.trim();
            // 匹配arr中的每一项
            arr.forEach((item) => {
                // 如果里面没有能匹配的字符就隐藏show页面，否则会有边框
                if (value.length == 0) {
                    return show.style.display = "none"
                }
                let res = item.indexOf(value);
                if (res != -1) {
                    str += "<p>" + item + "</p>"
                }
            })
            show.innerHTML = str;
            // 判断如果里面没有数值，直接隐藏show
        }
    </script>