操作前后效果：（知识点和完整代码在最后面）

bilibili在线视频演示链接：

【前端实例教程】使用 HTML CSS 和 JavaScript 创建自定义搜索+下拉选择框菜单_哔哩哔哩_bilibili【前端实例教程】使用 HTML CSS 和 JavaScript 创建自定义搜索+下拉选择框菜单, 视频播放量 54、弹幕量 0、点赞数 2、投硬币枚数 0、收藏人数 6、转发人数 0, 视频作者南北极之间, 作者简介我的csdn账号：南北极之间，相关视频：JavaScript全套教程，零基础JavaScript入门，Web前端实战教程，【前端实例代码】如何在HTML CSS和JavaScript|中使用正则表达式RegExp输入框校验email电子邮件验证，coderwhy前端系统课高薪培养计划2022课代表(hyy4424)，黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程，Javascript Leetcode 76. Minimum Window Substring 最小覆盖子串-- 卡坦刷题，前端程序员既然要出去面试找工作，简历中一定要有亮点，到底什么才算项目中的亮点？，【创意编码】使用自定义 ThreeJS 着色器创建交互式 3D 地球仪，【毕业设计】震惊：00后程序员的毕业设计就长这样？？？，【Reducible双语】PNG 原理——为质量牺牲速度，HTML+CSS+JS实现登陆注册页面https://www.bilibili.com/video/BV1sV4y1x7nW/?vd_source=5cc677504c9c936e5a0ea2042eb76a56

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>【前端实例教程】使用 HTML CSS 和 JavaScript 创建自定义搜索+下拉选择框菜单</title>
    <link href=https://unicons.iconscout.com/release/v4.0.0/css/line.css"/>
    <style>
        /* Import Google Font - Poppins */
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        body {
            background: #4285f4;
        }

        ::selection {
            color: #fff;
            background: #4285f4;
        }

        .wrapper {
            width: 370px;
            margin: 85px auto 0;
        }

        .select-btn, li {
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .select-btn {
            height: 65px;
            padding: 0 20px;
            font-size: 22px;
            background: #fff;
            border-radius: 7px;
            justify-content: space-between;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .select-btn i {
            font-size: 31px;
            transition: transform 0.3s linear;
        }

        .wrapper.active .select-btn i {
            transform: rotate(-180deg);
        }

        .content {
            display: none;
            padding: 20px;
            margin-top: 15px;
            background: #fff;
            border-radius: 7px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .wrapper.active .content {
            display: block;
        }

        .content .search {
            position: relative;
        }

        .search i {
            top: 50%;
            left: 15px;
            color: #999;
            font-size: 20px;
            pointer-events: none;
            transform: translateY(-50%);
            position: absolute;
        }

        .search input {
            height: 50px;
            width: 100%;
            outline: none;
            font-size: 17px;
            border-radius: 5px;
            padding: 0 20px 0 43px;
            border: 1px solid #B3B3B3;
        }

        .search input:focus {
            padding-left: 42px;
            border: 2px solid #4285f4;
        }

        .search input::placeholder {
            color: #bfbfbf;
        }

        .content .options {
            margin-top: 10px;
            max-height: 250px;
            overflow-y: auto;
            padding-right: 7px;
        }

        .options::-webkit-scrollbar {
            width: 7px;
        }

        .options::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 25px;
        }

        .options::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 25px;
        }

        .options::-webkit-scrollbar-thumb:hover {
            background: #b3b3b3;
        }

        .options li {
            height: 50px;
            padding: 0 13px;
            font-size: 21px;
        }

        .options li:hover, li.selected {
            border-radius: 5px;
            background: #f2f2f2;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="select-btn">
        <span>Select Country</span>
        <i class="uil uil-angle-down"></i>
    </div>
    <div class="content">
        <div class="search">
            <i class="uil uil-search"></i>
            <input spellcheck="false" type="text" placeholder="Search">
        </div>
        <ul class="options"></ul>
    </div>
</div>
<script>
    const wrapper = document.querySelector(".wrapper"),
        selectBtn = wrapper.querySelector(".select-btn"),
        searchInp = wrapper.querySelector("input"),
        options = wrapper.querySelector(".options");

    let countries = ["Afghanistan", "Algeria", "Argentina", "Australia", "Bangladesh", "Belgium", "Bhutan",
        "Brazil", "Canada", "China", "Denmark", "Ethiopia", "Finland", "France", "Germany",
        "Hungary", "Iceland", "India", "Indonesia", "Iran", "Italy", "Japan", "Malaysia",
        "Maldives", "Mexico", "Morocco", "Nepal", "Netherlands", "Nigeria", "Norway", "Pakistan",
        "Peru", "Russia", "Romania", "South Africa", "Spain", "Sri Lanka", "Sweden", "Switzerland",
        "Thailand", "Turkey", "Uganda", "Ukraine", "United States", "United Kingdom", "Vietnam"];

    function addCountry(selectedCountry) {
        options.innerHTML = "";
        countries.forEach(country => {
            let isSelected = country == selectedCountry ? "selected" : "";
            let li = `<li onclick="updateName(this)" class="${isSelected}">${country}</li>`;
            options.insertAdjacentHTML("beforeend", li);
        });
    }

    addCountry();

    function updateName(selectedLi) {
        searchInp.value = "";
        addCountry(selectedLi.innerText);
        wrapper.classList.remove("active");
        selectBtn.firstElementChild.innerText = selectedLi.innerText;
    }

    searchInp.addEventListener("keyup", () => {
        let arr = [];
        let searchWord = searchInp.value.toLowerCase();
        arr = countries.filter(data => {
            return data.toLowerCase().startsWith(searchWord);
        }).map(data => {
            let isSelected = data == selectBtn.firstElementChild.innerText ? "selected" : "";
            return `<li onclick="updateName(this)" class="${isSelected}">${data}</li>`;
        }).join("");
        options.innerHTML = arr ? arr : `<p style="margin-top: 10px;">Oops! Country not found</p>`;
    });

    selectBtn.addEventListener("click", () => wrapper.classList.toggle("active"));
</script>
</body>
</html>

涉及到的知识点：

1、HTML DOM querySelector() 方法

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

语法

document.querySelector(CSS selectors)

参数值

参数	类型	描述
CSS 选择器	String	必须。指定一个或多个匹配元素的 CSS 选择器。可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。对于多个选择器，使用逗号隔开，返回一个匹配的元素。提示：更多 CSS 选择器，请参阅我们的 CSS 选择器参考手册。

技术细节

DOM 版本:	Selectors Level 1 Document Object
返回值:	匹配指定 CSS 选择器的第一个元素。如果没有找到，返回 null。如果指定了非法选择器则抛出 SYNTAX_ERR 异常。

2、HTML DOM addEventListener() 方法

定义和用法

addEventListener() 方法用于向指定元素添加事件句柄。

提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

语法

element.addEventListener(event, function, useCapture)

参数值

参数	描述
event	必须。字符串，指定事件名。注意: 不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。提示：所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function	必须。指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。可能值: true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行

3、HTML DOM classList 属性

定义和用法

classList 属性返回元素的类名，作为 DOMTokenList 对象。

该属性用于在元素中添加，移除及切换 CSS 类。

classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。

语法

element.classList

Properties

属性	Description
length	返回类列表中类的数量该属性是只读的

4、forEach() 方法

5、map() 方法

6、filter()方法

7、join()方法

8、toLowerCase()方法

9、es6模板字符串

【前端实例教程】使用 HTML CSS 和 JavaScript 创建自定义搜索+下拉选择框菜单

操作前后效果：（知识点和完整代码在最后面）

bilibili在线视频演示链接：

完整代码：

涉及到的知识点：

1、HTML DOM querySelector() 方法

语法

参数值

技术细节

2、HTML DOM addEventListener() 方法

定义和用法

语法

参数值

3、HTML DOM classList 属性

定义和用法

语法

Properties

4、forEach() 方法

猜你喜欢