JavaScript -webAPI - DOM操作 - 案例 -仿百度搜索

最新推荐文章于 2023-11-03 18:40:44 发布

Henry_ww

最新推荐文章于 2023-11-03 18:40:44 发布

阅读量151

点赞数 1

分类专栏：案例文章标签： js

本文链接：https://blog.csdn.net/Henry_ID/article/details/119580933

版权

案例专栏收录该内容

34 篇文章 4 订阅

订阅专栏

本文详细介绍了如何使用HTML、CSS和JavaScript实现一个简单的搜索框，模拟百度搜索的效果。当用户在输入框中输入内容时，会动态显示匹配的搜索列表；鼠标移入和移出列表项时，颜色会相应变化；点击列表项，搜索框会显示所选内容并清除搜索列表。此外，还实现了点击搜索按钮跳转到百度搜索页面的功能。

摘要由CSDN通过智能技术生成

案例：模拟百度搜索框

在这里插入图片描述
需求分析：
1.键盘松开txt ：根据搜索内容显示对应搜索列表ul
2.鼠标移入li元素：颜色变红
3.鼠标移出li元素：颜色变原先颜色
4.鼠标点击li元素：（1）搜索框显示点击的li元素文本（2）情况内容列表ul
思路分析：事件三要素
1 获取元素：
2 注册事件：
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>仿百度搜索</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            body {
                font-size: 20px;
            }

            .box {
                width: 600px;
                height: 40px;
                margin: 200px auto;
                position: relative;
            }

            #txt {
                width: 498px;
                height: 38px;
                border: 1px solid #ccc;
                font-size: 20px;
            }

            #search {
                width: 100px;
                height: 40px;
            }

            #keywords {
                position: absolute;
                top: 40px;
                left: 0;
                background-color: rgb(12, 255, 24);
                list-style: none;
                width: 500px;
            }

            li {
                line-height: 24px;
            }
        </style>
        <script>
            // 代码在html上面,onload
            window.onload = function () {
                // 需求1: 用户输入内容, 从词条中去匹配

                // 1. 获取相关元素: ul,输入框
                const ul = document.querySelector("#keywords");
                const txt = document.querySelector("#txt");
                console.log(ul, txt);

                // 2. 给输入框增加检测事件: oninput
                txt.oninput = function () {
                    // console.log(123);
                    // // 2.1 清空前面匹配到到结果: 用户重新输入了,数据要改变.
                    ul.innerHTML = "";
                    // 2.2 获取用户输入的数据
                    let value = this.value.trim();
                    // console.log(value);

                    // 2.3 安全判定: 不能为空字符串(用上trim())
                    if (value == "") return;
                    // 2.4 去词条匹配: 遍历词条数组
                    keywords.forEach(function (item) {
                        // 2.4.1 判定用户输入的内容在词条中能找到: 找到就是匹配上
                        if (item.indexOf(value) != -1) {
                            // 2.4.2 匹配成功: 创建li,将词条放到li,li放到ul中
                            const li = document.createElement("li");

                            li.innerText = item;

                            ul.appendChild(li);

                            // 需求2:鼠标移入移出变色,点击选中放到文本框中,清空匹配
                            li.onmouseover = function () {
                                // 修改背景色为红色
                                this.style.backgroundColor = "red";
                            };
                            li.onmouseout = function () {
                                // 清空背景色:走ul的背景
                                this.style.backgroundColor = "";
                            };
                            li.onclick = function () {
                                // 将文本放入input框中
                                txt.value = item;
                                // 清空ul
                                ul.innerHTML = "";
                            };
                        }
                    });
                };

                // 2.1 清空前面匹配到到结果: 用户重新输入了,数据要改变

                // 扩展:真实百度搜多
                // 用户点击搜索按钮,那用户输入的值  去百度服务器查
                document.querySelector("#search").onclick = function () {
                    // 获取用户输入的内容
                    let value = txt.value.trim();
                    // 安全:不能为空
                    if (value.length == 0) return;
                    // 跳转百度搜索页面:提供用户输入的关键字
                    // http://www.baidu.com/s?ie=UTF-8&wd=js
                    location.assign(`http://www.baidu.com/s?ie=UTF-8&wd=${value}`);
                };
            };
        </script>
        <script src="./js/data.js"></script>
    </head>
    <body>
        <div class="box">
            <div class="top"><input type="text" id="txt" /><input type="button" value="search" id="search" /></div>
            <ul id="keywords"></ul>
        </div>
    </body>
</html>