每天一个js小demo----搜索框

最新推荐文章于 2022-06-20 23:06:27 发布

Laohei0101

最新推荐文章于 2022-06-20 23:06:27 发布

阅读量205

点赞数

文章标签： javascript css3 前端

本文链接：https://blog.csdn.net/Laohei0101/article/details/121153446

版权

话不多说还是先直接显示效果
在这里插入图片描述
当输入的数据与数据裤中的数据配到的时候

当输入的数据与数据库中的数据匹配不到的时候

总体的效果就是这样的，直接上代码

<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>

<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>
            <p>哈哈哈</p>

        </div>
    </div>
    <script>
        let arr = ['前端教程 1111', 'HTML基础  2222', 'CSS基础 3333',
            'Vue核心技术  44444', 'JavaScript核心技术 55555', 'JavaScript高级技术 8888'];
        //逻辑1、先把区域展示或者隐藏
        let input = document.querySelector("#val");
        let show = document.querySelector("#show");
        //当键盘输入值的时候显示
        input.onkeyup = function () {
            show.style.display = 'block';
            let str = '';
            //逻辑2、进行数据的匹配
            //通过input.value的值和arr中的值进行匹配  如果arr中不存在这个值的话就返回-1
            arr.forEach((item) => {
                //通过item来进行筛选
                let res = item.indexOf(input.value);
                //如果有这个值的话就显示这个值，如果没有这个值的话就显示暂无数据
                if (res != -1) {
                    str += '<p>' + item + '</p>';
                }
            })
            // 如果input.value为空或者 str为false 给用户一个提示
            if (!input.value || !str) {
                show.innerHTML = '<p>暂无结果</p>'
            } else {
                show.innerHTML = str;
            }
        }
        //当获取焦点时隐藏
        input.onblur = function () {
            show.style.display = 'none';
            input.value = '';
        }
    </script>
</body>

Laohei0101

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
每天一个js小demo----搜索框

话不多说还是先直接显示效果当输入的数据与数据裤中的数据配到的时候当输入的数据与数据库中的数据匹配不到的时候总体的效果就是这样的，直接上代码<style> .content { width: 500px; margin: 40px auto; } .search { width: 400px; overflow: hidden; } .search input {
复制链接

扫一扫