Skip to content

Commit ad09336

Browse files
author
AP-BAPPI-WEBAPP\bappi.chandra
committed
Completed Dropdown with Search and Checkboxes
0 parents  commit ad09336

File tree

3 files changed

+165
-0
lines changed

3 files changed

+165
-0
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# dropdown-search-checkbox-javascript

‎chevron-up.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎index.html‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Dropdown with Search & Checkboxes</title>
7+
<style>
8+
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
9+
body {
10+
font-family: "Poppins", sans-serif;
11+
}
12+
.selectDropdown {
13+
position: relative;
14+
display: block;
15+
width: 100%;
16+
}
17+
.selectDropdownToggle {
18+
width: 100%;
19+
border: 1px solid #2F8B8A;
20+
cursor: pointer;
21+
background: #fff;
22+
text-align: left;
23+
border-radius: 8px;
24+
color: #334155;
25+
font-size: 12px;
26+
font-weight: 500;
27+
display: flex;
28+
justify-content: space-between;
29+
align-items: center;
30+
31+
position: relative;
32+
z-index: 9999;
33+
}
34+
.selectDropdownMenu {
35+
display: none;
36+
position: absolute;
37+
width: 100%;
38+
background: #fff;
39+
border: 1px solid #ddd;
40+
max-height: 300px;
41+
overflow-x: hidden;
42+
overflow-y: auto;
43+
z-index: 1000;
44+
box-shadow: 0px 4px 34px 0px #0000000D;
45+
46+
margin-top: -10px;
47+
border-bottom-right-radius: 12px;
48+
border-bottom-left-radius: 12px;
49+
}
50+
.selectDropdownMenu input[type="text"] {
51+
border: 1px solid #E2E8F0;
52+
width: 97.3%;
53+
color: #334155;
54+
font-weight: 500;
55+
padding: .5rem 1rem;
56+
border-radius: 8px;
57+
margin-bottom: .5rem;
58+
}
59+
.selectDropdownMenu input[type="text"]:focus{
60+
border: 1px solid #2F8B8A;
61+
outline: none;
62+
}
63+
.selectDropdownItem {
64+
display: flex;
65+
justify-content: space-between;
66+
align-items: center;
67+
padding: 8px;
68+
cursor: pointer;
69+
width: 100%;
70+
box-sizing: border-box;
71+
font-size: 0.75rem;
72+
color: #000000;
73+
user-select: none;
74+
}
75+
.selectDropdownItem:focus,
76+
.selectDropdownItem:hover {
77+
background: rgba(47, 139, 138, 0.1);
78+
color: #2F8B8A;
79+
}
80+
.selectDropdownItem span {
81+
flex: 1;
82+
}
83+
.selectDropdownItem input[type="checkbox"] {
84+
pointer-events: none;
85+
}
86+
87+
.dropdown-toggle__title{
88+
width: 100%;
89+
display: flex;
90+
justify-content: space-between;
91+
align-items: center;
92+
padding: .75rem;
93+
user-select: none;
94+
}
95+
</style>
96+
</head>
97+
<body>
98+
99+
<div class="selectDropdown">
100+
<div class="selectDropdownToggle">
101+
<div class="dropdown-toggle__title">
102+
<span>Select Continent/ Region</span>
103+
<img src="./chevron-up.svg">
104+
</div>
105+
</div>
106+
<div class="selectDropdownMenu">
107+
<div style="padding: 1rem;">
108+
<div class="slectInputSearch">
109+
<input type="text" id="searchBox" placeholder="Search...">
110+
</div>
111+
<div id="selectDropdownItems">
112+
<div class="selectDropdownItem"><span>Apple</span> <input type="checkbox" value="Apple"></div>
113+
<div class="selectDropdownItem"><span>Banana</span> <input type="checkbox" value="Banana"></div>
114+
<div class="selectDropdownItem"><span>Cherry</span> <input type="checkbox" value="Cherry"></div>
115+
<div class="selectDropdownItem"><span>Mango</span> <input type="checkbox" value="Mango"></div>
116+
<div class="selectDropdownItem"><span>Orange</span> <input type="checkbox" value="Orange"></div>
117+
<div class="selectDropdownItem"><span>Pineapple</span> <input type="checkbox" value="Pineapple"></div>
118+
<div class="selectDropdownItem"><span>Grapes</span> <input type="checkbox" value="Grapes"></div>
119+
</div>
120+
</div>
121+
</div>
122+
</div>
123+
124+
<script>
125+
const dropdown = document.querySelector(".selectDropdown");
126+
const dropdownToggle = document.querySelector(".selectDropdownToggle");
127+
const dropdownMenu = document.querySelector(".selectDropdownMenu");
128+
const searchBox = document.getElementById("searchBox");
129+
130+
// Toggle dropdown menu
131+
dropdownToggle.addEventListener("click", () => {
132+
dropdownMenu.style.display = dropdownMenu.style.display === "block" ? "none" : "block";
133+
});
134+
135+
// Toggle checkbox when clicking dropdown item
136+
document.querySelectorAll(".selectDropdownItem").forEach(item => {
137+
item.addEventListener("click", () => {
138+
const checkbox = item.querySelector("input[type='checkbox']");
139+
checkbox.checked = !checkbox.checked; // Toggle checked state
140+
});
141+
});
142+
143+
// Filter items based on search
144+
searchBox.addEventListener("keyup", () => {
145+
let searchValue = searchBox.value.toLowerCase();
146+
document.querySelectorAll(".selectDropdownItem").forEach(item => {
147+
let text = item.textContent.toLowerCase();
148+
item.style.display = text.includes(searchValue) ? "flex" : "none";
149+
});
150+
});
151+
152+
// Close dropdown when clicking outside
153+
document.addEventListener("click", (e) => {
154+
if (!dropdown.contains(e.target)) {
155+
dropdownMenu.style.display = "none";
156+
}
157+
});
158+
</script>
159+
160+
</body>
161+
</html>

0 commit comments

Comments
 (0)