DEV Community

Cover image for Custom Select Input with search option in HTML, CSS, and Javascript
Ashutosh Tiwari
Ashutosh Tiwari

Posted on • Originally published at incoderweb.blogspot.com

Custom Select Input with search option in HTML, CSS, and Javascript

#html #css #javascript #incoder

Hello friends, today in this blog, we will learn how to create a custom select input with a search option in HTML, CSS, and Javascript. In our previous blog, we saw how to create a responsive image lightbox design using HTML, CSS, and Vanilla Javascript. Now it's time to create a custom select input with a search option. If you are interested then you can check my other javascript projects after reading this blog. My javascript blogs.

The custom select menu is a dropdown menu that allows users to select or choose a particular option that is predefined. In this menu, there is a select input with a search box as you can see in the image above.

You may like these:-

On this select menu, there are many countries as an option and users can select any country at a time. There is a search input also that is used to search anything quickly from the options. If you want to check the demo then you can check the source code and demo as well.

Visit here to check demo.

HTML Code 

<!-- --------------------- Created By InCoder --------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Select Input - InCoder</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
    <div class="customInputContainer">
        <div class="customInput">
            <div class="selectedData">Custom Input</div>
            <i class="fa-solid fa-angle-right"></i>
        </div>
        <div class="options">
            <div class="searchInput">
                <i class="fa-solid fa-magnifying-glass"></i>
                <input type="text" id="searchInput" placeholder="Search">
            </div>
            <ul>
            </ul>
        </div>
    </div>    

    <script src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS Code 

/* --------------------- Created By InCoder --------------------- */

@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");

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

body {
  display: flex;
  justify-content: center;
  background-color: rgb(52, 211, 153);
}

.customInputContainer {
  width: 20rem;
  display: flex;
  max-width: 20rem;
  margin-top: 2rem;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.customInputContainer .customInput {
  margin: 0 1rem;
  cursor: pointer;
  user-select: none;
  font-size: 1.16rem;
  justify-content: space-between;
  padding: 0.6rem 1rem 0.6rem 0.6rem;
}

.customInputContainer .customInput i {
  transition: transform 0.3s ease-in-out;
}

.customInputContainer.show .customInput i {
  transform: rotate(90deg);
}

.customInputContainer :is(.customInput, .options) {
  width: 100%;
  display: flex;
  color: #202020;
  background: #fff;
  align-items: center;
  border-radius: 0.3rem;
}

.customInputContainer .options {
  display: none;
  padding: 0.6rem;
  font-size: 1.1rem;
  justify-content: start;
  flex-direction: column;
  margin: 0.8rem 1rem 0rem 1rem;
  transition: background-color 0.1s ease-in-out;
}

.customInputContainer.show .options {
  display: block;
}

.customInputContainer .options :is(.searchInput, ul) {
  width: 100%;
  max-height: 15rem;
  overflow-y: scroll;
  position: relative;
}

.customInputContainer .options ul::-webkit-scrollbar {
  width: 6px;
  position: relative;
}

.customInputContainer .options ul::-webkit-scrollbar-track{
    width: 2px;
    border-radius: .2rem;
    background: rgb(0 0 0 / 10%)
}

.customInputContainer .options ul::-webkit-scrollbar-thumb{
    border-radius: .2rem;
    background: rgb(0 0 0 / 30%);
}

.customInputContainer .options .searchInput {
  display: flex;
  padding: 0 0.4rem;
  overflow-y: auto;
  align-items: center;
  border-radius: 0.4rem;
  color: rgb(0 0 0 / 50%);
  border: 2px solid rgb(0 0 0 / 30%);
}

.customInputContainer .options .searchInput.focus {
  border: 2px solid rgb(52 211 153 / 70%);
}

.customInputContainer .options .searchInput input[type="text"] {
  border: 0;
  width: 100%;
  outline: none;
  height: 2.5rem;
  font-size: 1rem;
  padding: 0 0.4rem;
  border-radius: 0.4rem;
}

.customInputContainer .options .searchInput input[type="text"]::placeholder {
  font-size: 1rem;
  color: rgb(0 0 0 / 50%);
}

.customInputContainer .options ul {
  margin: 0.5rem 0;
}

.customInputContainer .options ul li {
    cursor: pointer;
    list-style: none;
    padding: 0.4rem 0.4rem;
    border-bottom: 1px solid rgb(204 204 204 / 50%);
}

.customInputContainer .options ul li.selected {
    background: rgb(52 211 153 / 50%);
}

.customInputContainer .options ul li.selected:hover {
    background: rgb(52 211 153 / 50%);
}

.customInputContainer .options ul li:last-child {
  border: 0;
}

.customInputContainer .options ul li:hover {
  background: rgb(52 211 153 / 20%);
}
Enter fullscreen mode Exit fullscreen mode

Javascript Code 

// --------------------- Created By InCoder ---------------------
let customInput = document.querySelector('.customInput')
selectedData = document.querySelector('.selectedData')
searchInput = document.querySelector('.searchInput input')
ul = document.querySelector('.options ul')
customInputContainer = document.querySelector('.customInputContainer')

window.addEventListener('click', (e) => {
    if (document.querySelector('.searchInput').contains(e.target)) {
        document.querySelector('.searchInput').classList.add('focus')
    } else {
        document.querySelector('.searchInput').classList.remove('focus')
    }
})

var countries = [
    "Custom Input",
    "Afghanistan",
    "Aland Islands",
    "Albania",
    "Algeria",
    "American Samoa",
    "Andorra",
    "Angola",
    "Anguilla",
    "Antarctica",
    "Antigua and Barbuda",
    "Argentina",
    "Armenia",
    "Aruba",
    "Australia",
    "Austria",
    "Azerbaijan",
    "Bahamas",
    "Bahrain",
    "Bangladesh",
    "Barbados",
    "Belarus",
    "Belgium",
    "Belize",
    "Benin",
    "Bermuda",
    "Bhutan",
    "Bolivia",
    "Bonaire, Sint Eustatius and Saba",
    "Bosnia and Herzegovina",
    "Botswana",
    "Bouvet Island",
    "Brazil",
    "British Indian Ocean Territory",
    "Brunei Darussalam",
    "Bulgaria",
    "Burkina Faso",
    "Burundi",
    "Cambodia",
    "Cameroon",
    "Canada",
    "Cape Verde",
    "Cayman Islands",
    "Central African Republic",
    "Chad",
    "Chile",
    "China",
    "Christmas Island",
    "Cocos (Keeling) Islands",
    "Colombia",
    "Comoros",
    "Congo",
    "Congo, Democratic Republic of the Congo",
    "Cook Islands",
    "Costa Rica",
    "Cote D'Ivoire",
    "Croatia",
    "Cuba",
    "Curacao",
    "Cyprus",
    "Czech Republic",
    "Denmark",
    "Djibouti",
    "Dominica",
    "Dominican Republic",
    "Ecuador",
    "Egypt",
    "El Salvador",
    "Equatorial Guinea",
    "Eritrea",
    "Estonia",
    "Ethiopia",
    "Falkland Islands (Malvinas)",
    "Faroe Islands",
    "Fiji",
    "Finland",
    "France",
    "French Guiana",
    "French Polynesia",
    "French Southern Territories",
    "Gabon",
    "Gambia",
    "Georgia",
    "Germany",
    "Ghana",
    "Gibraltar",
    "Greece",
    "Greenland",
    "Grenada",
    "Guadeloupe",
    "Guam",
    "Guatemala",
    "Guernsey",
    "Guinea",
    "Guinea-Bissau",
    "Guyana",
    "Haiti",
    "Heard Island and Mcdonald Islands",
    "Holy See (Vatican City State)",
    "Honduras",
    "Hong Kong",
    "Hungary",
    "Iceland",
    "India",
    "Indonesia",
    "Iran",
    "Iraq",
    "Ireland",
    "Isle of Man",
    "Israel",
    "Italy",
    "Jamaica",
    "Japan",
    "Jersey",
    "Jordan",
    "Kazakhstan",
    "Kenya",
    "Kiribati",
    "Korea, Democratic People's Republic of",
    "Korea, Republic of",
    "Kosovo",
    "Kuwait",
    "Kyrgyzstan",
    "Lao People's Democratic Republic",
    "Latvia",
    "Lebanon",
    "Lesotho",
    "Liberia",
    "Libyan Arab Jamahiriya",
    "Liechtenstein",
    "Lithuania",
    "Luxembourg",
    "Macao",
    "Macedonia, the Former Yugoslav Republic of",
    "Madagascar",
    "Malawi",
    "Malaysia",
    "Maldives",
    "Mali",
    "Malta",
    "Marshall Islands",
    "Martinique",
    "Mauritania",
    "Mauritius",
    "Mayotte",
    "Mexico",
    "Micronesia, Federated States of",
    "Moldova, Republic of",
    "Monaco",
    "Mongolia",
    "Montenegro",
    "Montserrat",
    "Morocco",
    "Mozambique",
    "Myanmar",
    "Namibia",
    "Nauru",
    "Nepal",
    "Netherlands",
    "Netherlands Antilles",
    "New Caledonia",
    "New Zealand",
    "Nicaragua",
    "Niger",
    "Nigeria",
    "Niue",
    "Norfolk Island",
    "Northern Mariana Islands",
    "Norway",
    "Oman",
    "Pakistan",
    "Palau",
    "Palestinian Territory, Occupied",
    "Panama",
    "Papua New Guinea",
    "Paraguay",
    "Peru",
    "Philippines",
    "Pitcairn",
    "Poland",
    "Portugal",
    "Puerto Rico",
    "Qatar",
    "Reunion",
    "Romania",
    "Russian Federation",
    "Rwanda",
    "Saint Barthelemy",
    "Saint Helena",
    "Saint Kitts and Nevis",
    "Saint Lucia",
    "Saint Martin",
    "Saint Pierre and Miquelon",
    "Saint Vincent and the Grenadines",
    "Samoa",
    "San Marino",
    "Sao Tome and Principe",
    "Saudi Arabia",
    "Senegal",
    "Serbia",
    "Serbia and Montenegro",
    "Seychelles",
    "Sierra Leone",
    "Singapore",
    "Sint Maarten",
    "Slovakia",
    "Slovenia",
    "Solomon Islands",
    "Somalia",
    "South Africa",
    "South Georgia and the South Sandwich Islands",
    "South Sudan",
    "Spain",
    "Sri Lanka",
    "Sudan",
    "Suriname",
    "Svalbard and Jan Mayen",
    "Swaziland",
    "Sweden",
    "Switzerland",
    "Syrian Arab Republic",
    "Taiwan, Province of China",
    "Tajikistan",
    "Tanzania, United Republic of",
    "Thailand",
    "Timor-Leste",
    "Togo",
    "Tokelau",
    "Tonga",
    "Trinidad and Tobago",
    "Tunisia",
    "Turkey",
    "Turkmenistan",
    "Turks and Caicos Islands",
    "Tuvalu",
    "Uganda",
    "Ukraine",
    "United Arab Emirates",
    "United Kingdom",
    "United States",
    "United States Minor Outlying Islands",
    "Uruguay",
    "Uzbekistan",
    "Vanuatu",
    "Venezuela",
    "Viet Nam",
    "Virgin Islands, British",
    "Virgin Islands, U.s.",
    "Wallis and Futuna",
    "Western Sahara",
    "Yemen",
    "Zambia",
    "Zimbabwe"
];

customInput.addEventListener('click', () => {
    customInputContainer.classList.toggle('show')
})

let countriesLength = countries.length

for (let i = 0; i < countriesLength; i++) {
    let country = countries[i]
    const li = document.createElement("li");
    const countryName = document.createTextNode(country);
    li.appendChild(countryName);
    ul.appendChild(li);
}


ul.querySelectorAll('li').forEach(li => {
    li.addEventListener('click', (e) => {
        let selectdItem = e.target.innerText
        selectedData.innerText = selectdItem

        for (const li of document.querySelectorAll("li.selected")) {
            li.classList.remove("selected");
        }
        e.target.classList.add('selected')
        customInputContainer.classList.toggle('show')
    })
});

function updateData(data) {
    let selectedCountry = data.innerText
    selectedData.innerText = selectedCountry

    for (const li of document.querySelectorAll("li.selected")) {
        li.classList.remove("selected");
    }
    data.classList.add('selected')
    customInputContainer.classList.toggle('show')
    console.log(selectedCountry);
}

searchInput.addEventListener('keyup', (e) => {
    let searchedVal = searchInput.value.toLowerCase()
    let searched_country = []

    searched_country = countries.filter(data => {
        return data.toLocaleLowerCase().startsWith(searchedVal)
    }).map(data => {
        return `<li onClick="updateData(this)">${data}</li>`
    }).join('')
    ul.innerHTML = searched_country ? searched_country : "<p style='margin-top: 1rem;'>Opps can't find any result <p style='margin-top: .2rem; font-size: .9rem;'>Try searching something else.</p></p>"
})
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

aneeqakhan profile image

How to Add Markers to Google Maps in React.js

Aneeqa Khan -

ashsajal profile image

JavaScript Event Loop Explained in 1 minute.

Ashfiquzzaman Sajal -

amankumarsingh01 profile image

React native and the JavaScript bridge.

A -

jacobandrewsky profile image

Using Tailwind plugins to create custom utility classes

Jakub Andrzejewski -