每天一个效果：（3）百度搜索数据显示

最新推荐文章于 2024-08-24 12:37:57 发布

liuyang___

最新推荐文章于 2024-08-24 12:37:57 发布

阅读量218

点赞数

分类专栏： css样式 js学习积累文章标签： javascript html css 前端

本文链接：https://blog.csdn.net/liuyang___/article/details/123834125

版权

js学习积累同时被 2 个专栏收录

62 篇文章 1 订阅

订阅专栏

css样式

18 篇文章 0 订阅

订阅专栏

<!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>Document</title>
    <style>
        body {
            background-color: #ccc;
        }
        .content {
            width: 400px;
            height: 600px;
            margin: 100px auto;
        }

        .serach {
            height: 30px;
            display: flex;
        }

        #val {
            width: 150px;
            height: 94%;
            padding-left: 5px;
            border: 1px solid rgb(106, 102, 102);
        }

        #sub {
            height: 115%;
            margin-left: 5px;
        }
        .show {
            display: inline;
            width: 161px;
            font-size: 10px;
            height: 300px;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="serach">
            <input type="text" id="val" placeholder="请输入课程">
            <input type="submit" id="sub">
        </div>
        <div class="show" id="show"></div>
    </div>
    <script>
        let arr = ['web前端精英培训班 980元','html核心技术 199元','css核心技术 299元','html核心技术 199元','vue核心技术 599元','html+css核心技术 299元','web前端在线商城 99元','Javascript高级技术 899元','Javascript核心技术 399元'];

        //逻辑：1.先完成  展示区域的显示或隐藏
        let input = document.getElementById('val');
        let show = document.getElementById('show');
        //onkeyup鼠标键盘按键被松开时事件
        input.onkeyup = function(){
            show.style.display = 'block';
            //input.value（拿到输入的值）  用输入的值去和arr的每一项去进行匹配  indexOf() 匹配不到  永远为-1
            let str = ''
            arr.forEach((item)=>{
                let res = item.indexOf(input.value);
                if(res != -1) {
                    str += '<p>'+item+'</p>';
                }
            })
            // console.log(str);
            //如果input.value的值为空或者 str为false 给用户一个提示
            if(!input.value || !str){
                show.innerHTML = '<p>暂无结果</p>'
            }
            else {
                show.innerHTML = str
            }
        }
        //onblur鼠标失去焦点事件
        input.onblur = function(){
            show.style.display = 'none';
            input.value = ''
        }
    </script>
</body>

</html>

liuyang___

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
每天一个效果：（3）百度搜索数据显示

<!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>D.
复制链接

扫一扫