用 indexof 实现模糊查询

最新推荐文章于 2023-06-30 12:02:38 发布

carpe diem xt

最新推荐文章于 2023-06-30 12:02:38 发布

阅读量870

点赞数

分类专栏： my_js

本文链接：https://blog.csdn.net/u_ndefine_d/article/details/115940794

版权

my_js 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

使用forEach 和 indexOf 实现模糊查询
以下代码复制到html文件中可直接运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模糊查询</title>
</head>
<body>
    <input id="input" type="text" >
    <button onclick="getInputVal()">筛选</button>
    <div id="box"></div>


    <script>
        let liArr = []
        let queryArr = [
            '周一，上班好难受', 
            '周二，还想着上周好玩的事情',
            '周三，这周终于过去一半了',
            '周四，加油加油坚持就是胜利',
            '周五，休息啦！',
            '周六，刷肥皂剧可真香，爱了爱了',
            '周日，明天又要开始上班了，衰！'
        ]



        // 初始化添加ul、li
        let divDom = document.getElementById('box')
        let ulDom = document.createElement('ul')
        divDom.appendChild(ulDom)
        queryArr.forEach(item => {
            var liObj = document.createElement('li')
            liObj.innerHTML = item
            ulDom.appendChild(liObj)
        })


        // 筛选
        function getInputVal() {
            divDom.innerHTML = '' // 移除节点
            let inputDom = document.getElementById('input') // 获取 input 框
            let inputValue = inputDom.value // 获取输入框的值
            

            liArr = queryArr.filter(item => item.indexOf(inputValue) >= 0) // 核心代码
            let ulDom = document.createElement('ul') // 创建ul节点
            divDom.appendChild(ulDom) // 将ul节点添加到div中
            if (liArr.length > 0) {
                liArr.forEach(item => {
                    var liObj = document.createElement('li') // 创建li节点
                    liObj.innerHTML = item   // 为节点赋值
                    ulDom.appendChild(liObj) // 将新的节点添加到父节点中
                })
            }
            
        }
    </script>
</body>
</html>

carpe diem xt

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
用 indexof 实现模糊查询

使用forEach 和 indexOf 实现模糊查询以下代码复制到html文件中可直接运行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid
复制链接

扫一扫