列表的模糊搜索——indexOf（）用法-对大小写敏感 & 检索字符串值没有出现，则该方法返回 -1

本文链接：https://blog.csdn.net/weixin_44867717/article/details/117251692

列表的模糊搜索——indexOf（）用法-对大小写敏感 & 检索字符串值没有出现，则该方法返回 -1

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>模糊查询</title>
</head>
<style>
    .wrap {
        text-align: center;
        max-width: 400px;
    }

    #newsBox {
        display: inline-block;
        text-align: left;
    }

    input {
        width: 100%;
    }
</style>

<body>
    <div class="wrap">
        <input type="text" id="demo">
        <ul id="newsBox">
        </ul>
    </div>
</body>
<script type="text/javascript">
    var data = ["百年：'牢记嘱托立德树人'", "百年南开：牢记嘱托立德树人", "书写命运与共的世界故事100天后,世园会等你来", "打造一支高素质政法队伍2019北京两会",
        "跋山涉水接力跑——全面深化改革的“广东探索”",
        "归途，开启家的记忆—写在2019年春运之际", "春运大幕今开启 多部门联动将严打车闹座霸", "人社部：已为38.9万农民工追发工资待遇57亿元", "个人所得税APP更新,房屋出租人信息不用填了"
    ]
    var input = document.getElementById("demo");
    var ul = document.getElementById("newsBox");

    function creat() {
        var value = input.value;
        var html = "";
        var newData = data.filter(item => {
            if (item.indexOf(value) > -1) { //indexOf方法中如果xxx.indexOf("")返回值为0
                return item
            }
            return newData
        })
        if (newData.length > 0) {
            for (var i = 0; i < newData.length; i++) {
                html += `<li>${newData[i]}</li>`
            }
        } else {
            html += `<li>暂无数据</li>`
        }
        ul.innerHTML = html;
    }
    creat()
    input.onchange = function (e) {
        creat()
    }
</script>

</html>

列表数据

在这里插入图片描述

搜索展示

在这里插入图片描述

附录：

indexOf（）用法

注释：indexOf() 方法对大小写敏感！

注释：如果要检索的字符串值没有出现，则该方法返回 -1。

let str = 'orange';
 
str.indexOf('o'); //0
str.indexOf('n'); //3
str.indexOf('c'); //-1