js原生——搜索框，模糊匹配（查询）_js搜索框查询匹配-优快云博客

本文链接：https://blog.youkuaiyun.com/h_jQuery/article/details/118611125

这是一个简单的HTML页面，实现了输入框实时搜索课程的功能。当用户在输入框中输入课程名称时，页面会显示包含输入关键字的课程列表。如果输入为空或者没有匹配结果，则显示‘暂无结果’。用户失去焦点时，搜索结果会消失。此代码适用于前端开发中的实时搜索场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .content {
            width: 500px;
            margin: 40px auto;
        }
        
        .search {
            width: 400px;
            overflow: hidden;
        }
        
        .search input {
            float: left;
        }
        
        #val {
            height: 35px;
            width: 300px;
            padding-left: 10px;
        }
        
        #sub {
            height: 40px;
            width: 80px;
            margin-left: 3px;
            font-size: 20px;
        }
        
        .show {
            width: 302px;
            height: 300px;
            border: 1px solid #ccc;
            padding-left: 10px;
            display: none;
        }
        
        .show p {
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="search">
            <input type="text" id="val" placeholder="请输入课程">
            <input type="submit" id="sub">
        </div>
        <div class="show" id="show">
            <!-- <p></p> -->
        </div>
    </div>
    <script>
        let arr = ['web前端精英特训班 980元', 'HTML核心技术 199元', 'CSS核心技术 299元', 'Vue核心技术 599元', 'CSS+HTML核心技术 299元', 'web前端在线商城 99元', 'JavaScript核心技术 399元', 'JavaScript高级技术 899元'];

        var inp = document.getElementById('val')
        var str = ''
        var show = document.getElementById('show')
            // 键盘起
        inp.onkeyup = function() {
            // 匹配结果框展示
            show.style.display = 'block';
            // 每次键盘输入，都会清空str
            let str = '';
            arr.forEach((item) => {
                    // 将结果赋给res，res是arr中有查询关键字的元素，如果没有就返回-1
                    let res = item.indexOf(inp.value);
                    // 判断是否存在
                    if (res != -1) {
                        // 会有多个匹配结果，所以累加
                        str += "<p>" + item + "</p>";
                    }
                })
                // 判断是否输入查询关键字，和arr中是否存在相匹配的结果
                // ||：两者都为true才可以为true
            if (!inp.value || !str) {
                // 没有没有的与查询关键字有关的结果
                show.innerHTML = "<p>暂无结果</p>";
            } else {
                // innerHTML可以解析标签
                show.innerHTML = str;
            }
        };
        // 失去焦点事件
        inp.onblur = function() {
            show.style.display = 'none';
            inp.value = ''
        }
    </script>
</body>

</html>