"Dropdown Searchbar"
Bootstrap 3.0.0 Snippet by muhittinbudak

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <body style="font-family: 'Strait', sans-serif;"> <!-- Font Awesome CDN --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" /> <!-- style.css --> <div class="search-bar"> <div class="dropdown"> <div id="drop-text" class="dropdown-text"> <span id="span">Everything</span> <i id="icon" class="fa-solid fa-chevron-down"></i> </div> <ul id="list" class="dropdown-list"> <li class="dropdown-list-item">Everything</li> <li class="dropdown-list-item">Software development</li> <li class="dropdown-list-item">Web development</li> <li class="dropdown-list-item">Data Analyst</li> <li class="dropdown-list-item">IT Consultent</li> <li class="dropdown-list-item">Network administrator</li> </ul> </div> <div class="search-box"> <input type="text" id="search-input" placeholder="Search Anything"> <i class="fa-solid fa-magnifying-glass"></i> </div> </div> </body>
:root{ --blue: #9ab3f5; --purple: #9a1663; --white: #ffffff; --shadow: rgba(0,0,0,0.15) 0px 5px 15px 0px00; margin-top: 50px; } *{ margin: 0; padding: 0; box-sizing: border-box; list-style-type: none; } body{ display: flex; align-items: center; justify-content: center; height: 70vh; background-color: var(--blue); } .search-bar{ display: flex; align-items: center; min-width: 700px; border-radius: 50px; background-color: var(--white); } .dropdown { position: relative; width: 280px; border-radius: 50px; border: 1px solid var(--white); background-color: var(--purple); box-shadow: var(--shadow); cursor: pointer; } .dropdown-text { display: flex; align-items: center; justify-content: space-between; font-size: 1rem; font-weight: 500; color: var(--white); padding: 1rem 1.5rem; } .dropdown-list { position: absolute; top: 4rem; left: 0; width: 100%; max-height: 0; overflow: hidden; border-radius: 15px; background-color: var(--white); transition: max-height 0.5s; } #list.show { max-height: 300px; } .dropdown-list-item { font-size: 0.9rem; font-weight: 500; padding: 1rem 0 1rem 1.5rem; cursor: pointer; transition: margin-left 0.2s ease-in-out , color 0.2s ease-in-out; } .dropdown-list-item:hover{ margin-left: 0.5rem; color: var(--purple); } .search-box { display: flex; align-items: center; padding-right: 1rem; width: 100%; color: var(--purple); } .search-box input { padding: 1rem; width: 100%; font-size: 1rem; font-weight: 500; color: var(--purple); border: 0; outline: 0; } .search-box i { font-size: 1.3rem; cursor: pointer; } .search-box input::placeholder{ font-size: 1rem; font-weight: 500; color: var(--purple); }
let dropdownBtn = document.getElementById("drop-text"); let list = document.getElementById("list"); let icon = document.getElementById("icon"); let span = document.getElementById("span"); let input = document.getElementById("search-input"); let listItmes = document.querySelectorAll(".dropdown-list-item"); //show dropdown list on click on dropdown dropdownBtn.onclick = function () { //rotate arrow icon if(list.classList.contains("show")){ icon.style.rotate = "-0deg"; } else { icon.style.rotate = "-180deg"; } list.classList.toggle("show"); }; //hide dropdown list when click outside dropdown btn window.onclick = function (e) { if (e.target.id !== "drop-text" && e.target.id !== "span" && e.target.id !== "icon") { list.classList.remove("show"); icon.style.rotate = "0deg"; } }; for(item of listItmes){ item.onclick = function(e){ //change dropdown btn text on click on selected list item span.innerText = e.target.innerText; if(e.target.innerText == "Everything"){ input.placeholder = "Search Anything..."; } input.placeholder = "Search in " + e.target.innerText + "..."; } }

Questions / Comments: