js案例（一）百度搜索

快一点要开始了

已于 2023-10-04 12:13:09 修改

阅读量316

点赞数

分类专栏： HTML、CSS、JavaScript简单案例文章标签： javascript 开发语言 ecmascript

于 2023-10-03 21:56:38 首次发布

本文链接：https://blog.csdn.net/xtcbql/article/details/133530067

版权

HTML、CSS、JavaScript简单案例专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本案例模拟实现百度首页搜索的效果：当键盘抬起时，获取输入框数据，在arr中进行匹配，把匹配到的数据在show中显示。当失去焦点时，show的display重新设置为none，从而实现隐藏。

实现效果：

案例代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js小案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .search {
            width: 300px;
            margin: 0 auto;
        }

        .seach_input {
            width: 100%;
            border-color: blue;
        }

        .show {
            width: 100%;
            border-radius: 0 0 5px 5px;
            border: 1px solid blue;
            padding: 10px 0;
            display: none;
        }
    </style>
</head>

<body>
    <div class="search">
        <input type="text" placeholder="请输入问题" class="seach_input">
        <div class="show">
            <ul></ul>
        </div>
    </div>
</body>
<script>
    let arr = ['你好星期六',
        '你好星期六免费观看完整版高清',
        '你好 李焕英',
        '你好星期六2023最新一期免费观看',
        '你好的英文',
        '你好我的大夫电视剧免费观看',
        '你好星期六免费观看完整版2023',
        '你好李焕英电影在线观看免费高清国语',
        '你好我的大夫',
        '你好世界']

    //遍历arr中的每个元素，用indexOf方法判断输入的值input_value是否包含
    //在当前遍历的元素中。在的话，则创建li，把匹配的内容放入li，把li加入到ul中，
    //遍历结束后，把ul加入到show中。注意，每一次匹配前，都要把show的内容清空。
    function search(input_value) {
        show.innerText = '';
        let ul = document.createElement('ul');
        arr.forEach((item) => {
            if (input_value != '' & item.indexOf(input_value) != -1) {
                let li = document.createElement('li');
                li.innerText = item;
                ul.appendChild(li);
            }
        })
        show.appendChild(ul);

    }
    let input = document.querySelector('.seach_input');
    let show = document.querySelector('.show');

    //逻辑1 ：当键盘抬起时，对输入内容进行匹配，将匹配结果加入.show这一div中，
    //并通过将display设置为block，让其显示。
    input.addEventListener('keyup', () => {
        console.log(input.value);
        search(input.value);
        show.style.display = 'block';
    })
    //逻辑2 ：当失去焦点时，通过将display设置为none，让show这一div隐藏。
    input.addEventListener('blur', () => {
        show.style.display = 'none';
    })
</script>

</html>