Bootstrap Snippet Dropdown Searchbar using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
: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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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 + "...";
    }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Dropdown Searchbar"
Bootstrap 3.0.0 Snippet by muhittinbudak

Related: See More

Questions / Comments:

"Dropdown Searchbar" Bootstrap 3.0.0 Snippet by muhittinbudak

Related: See More

Questions / Comments:

"Dropdown Searchbar"
Bootstrap 3.0.0 Snippet by muhittinbudak