操作前后效果:(知识点和完整代码在最后面)
bilibili在线视频演示链接:
完整代码:
<!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 | 可选。布尔值,指定事件是否在捕获或冒泡阶段执行。 可能值:
|
推荐阅读:
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模板字符串