Open In App

Create A Custom Select Menu with Search Box using HTML CSS and JavaScript

Last Updated : 17 Nov, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

This article will show you how to create a custom select menu with a search box using HTML, CSS, and JavaScript. First, we create an option list for the select box, and we can search for text in the text input box. The search result displays the matched option value. Additionally, we have added a “clear” button to remove your latest search.

Screenshot-2023-11-17-155441

Preview

Approach

  • First create an HTML card and center in the window, including a search box, all custom options as a menu, and a button to remove the latest search.
  • Now create an unordered list inside the search box <div> and all the custom options inside <li> tag.
  • In the custom select menu add all the options, in this case, add all the country’s name.
  • Now add an output section where your selected “Options” from the menu will be displayed.
  • Add an event listener to the search box to find selected countries in the list. If found, display the country name. Otherwise, display “blank”.
  • Add a “clear” button to remove your latest search.

Example: In this example, we will see the implementation to create a custom menu with search box by using HTML, CSS, and JavaScript.

Javascript




const searchBox = document.querySelector('.search-box');
const options = document.querySelectorAll('.options li');
const selectedOption = document.querySelector('.selected-option');
const clearButton = document.getElementById('clear-button');
  
// Check if search country present in menu list
searchBox.addEventListener('input', () => {
    const searchTerm = searchBox.value.toLowerCase();
  
    options.forEach(option => {
        const text = option.textContent.toLowerCase();
        if (text.includes(searchTerm)) {
            option.style.display = 'block';
        } else {
            option.style.display = 'none';
        }
    });
});
  
// Iterating and printing the selected country name
for (const option of options) {
    option.addEventListener('click', () => {
        const value = option.getAttribute('data-value');
        selectedOption.textContent = 
            "You have chosen " + option.textContent;
        searchBox.value = '';
        for (const opt of options) {
            opt.style.display = 'block';
        }
    });
}
  
clearButton.addEventListener('click', function () {
    selectedOption.textContent = 'Select an option';
    searchBox.value = '';
    options.forEach(option => {
        option.style.display = 'block';
    });
});
 






                        









HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html lang="en"> 


  


<head> 


    <meta charset="UTF-8"> 


    <meta name="viewport" content= 


        "width=device-width, initial-scale=1.0"> 


    <link rel="stylesheet" href="style.css"> 


    <title>Custom Select Menu with Search Box</title> 


</head> 


  


<body> 


    <div class="main"> 


        <h2 class="center-text"> 


            GeeksforGeeks 


        </h2> 


          


        <div class="selectBox"> 


            <input type="text" class="search-box" 


                placeholder="Select your country"> 


            <ul class="options"> 


                <ul class="options"> 


                    <li data-value="afghanistan">Afghanistan</li> 


                    <li data-value="albania">Albania</li> 


                    <li data-value="algeria">Algeria</li> 


                    <li data-value="andorra">Andorra</li> 


                    <li data-value="angola">Angola</li> 


                    <li data-value="antigua-and-barbuda"> 


                        Antigua and Barbuda 


                    </li> 


                    <li data-value="argentina">Argentina</li> 


                    <li data-value="armenia">Armenia</li> 


                    <li data-value="australia">Australia</li> 


                    <li data-value="austria">Austria</li> 


                    <li data-value="azerbaijan">Azerbaijan</li> 


                    <li data-value="bahamas">Bahamas</li> 


                    <li data-value="bahrain">Bahrain</li> 


                    <li data-value="bangladesh">Bangladesh</li> 


                    <li data-value="barbados">Barbados</li> 


                    <li data-value="belarus">Belarus</li> 


                    <li data-value="belgium">Belgium</li> 


                    <li data-value="belize">Belize</li> 


                    <li data-value="benin">Benin</li> 


                    <li data-value="bhutan">Bhutan</li> 


                    <li data-value="bolivia">Bolivia</li> 


                    <li data-value="bosnia-and-herzegovina"> 


                        Bosnia and Herzegovina 


                    </li> 


                    <li data-value="botswana">Botswana</li> 


                    <li data-value="brazil">Brazil</li> 


                    <li data-value="brunei">Brunei</li> 


                    <li data-value="bulgaria">Bulgaria</li> 


                    <li data-value="burkina-faso">Burkina Faso</li> 


                    <li data-value="burundi">Burundi</li> 


                    <li data-value="cabo-verde">Cabo Verde</li> 


                    <li data-value="cambodia">Cambodia</li> 


                    <li data-value="cameroon">Cameroon</li> 


                    <li data-value="canada">Canada</li> 


                    <li data-value="central-african-republic"> 


                        Central African Republic 


                    </li> 


                    <li data-value="chad">Chad</li> 


                    <li data-value="chile">Chile</li> 


                    <li data-value="china">China</li> 


                    <li data-value="colombia">Colombia</li> 


                    <li data-value="comoros">Comoros</li> 


                    <li data-value="congo-brazzaville"> 


                        Congo (Brazzaville) 


                    </li> 


                    <li data-value="congo-kinshasa"> 


                        Congo (Kinshasa) 


                    </li> 


                    <li data-value="costa-rica">Costa Rica</li> 


                    <li data-value="croatia">Croatia</li> 


                    <li data-value="cuba">Cuba</li> 


                    <li data-value="cyprus">Cyprus</li> 


                    <li data-value="czech-republic"> 


                        Czech Republic 


                    </li> 


                    <li data-value="denmark">Denmark</li> 


                    <li data-value="djibouti">Djibouti</li> 


                    <li data-value="dominica">Dominica</li> 


                    <li data-value="dominican-republic"> 


                        Dominican Republic 


                    </li> 


                    <li data-value="east-timor">East Timor</li> 


                    <li data-value="ecuador">Ecuador</li> 


                    <li data-value="egypt">Egypt</li> 


                    <li data-value="el-salvador">El Salvador</li> 


                    <li data-value="equatorial-guinea"> 


                        Equatorial Guinea 


                    </li> 


                    <li data-value="eritrea">Eritrea</li> 


                    <li data-value="estonia">Estonia</li> 


                    <li data-value="eswatini">Eswatini</li> 


                    <li data-value="ethiopia">Ethiopia</li> 


                    <li data-value="fiji">Fiji</li> 


                    <li data-value="finland">Finland</li> 


                    <li data-value="france">France</li> 


                    <li data-value="gabon">Gabon</li> 


                    <li data-value="gambia">Gambia</li> 


                    <li data-value="georgia">Georgia</li> 


                    <li data-value="germany">Germany</li> 


                    <li data-value="ghana">Ghana</li> 


                    <li data-value="greece">Greece</li> 


                    <li data-value="grenada">Grenada</li> 


                    <li data-value="guatemala">Guatemala</li> 


                    <li data-value="guinea">Guinea</li> 


                    <li data-value="guinea-bissau">Guinea-Bissau</li> 


                    <li data-value="guyana">Guyana</li> 


                    <li data-value="haiti">Haiti</li> 


                    <li data-value="honduras">Honduras</li> 


                    <li data-value="hungary">Hungary</li> 


                    <li data-value="iceland">Iceland</li> 


                    <li data-value="india">India</li> 


                    <li data-value="indonesia">Indonesia</li> 


                    <li data-value="iran">Iran</li> 


                    <li data-value="iraq">Iraq</li> 


                    <li data-value="ireland">Ireland</li> 


                    <li data-value="israel">Israel</li> 


                    <li data-value="italy">Italy</li> 


                    <li data-value="ivory-coast">Ivory Coast</li> 


                    <li data-value="jamaica">Jamaica</li> 


                    <li data-value="japan">Japan</li> 


                    <li data-value="jordan">Jordan</li> 


                    <li data-value="kazakhstan">Kazakhstan</li> 


                    <li data-value="kenya">Kenya</li> 


                    <li data-value="kiribati">Kiribati</li> 


                    <li data-value="kosovo">Kosovo</li> 


                    <li data-value="kuwait">Kuwait</li> 


                    <li data-value="kyrgyzstan">Kyrgyzstan</li> 


                    <li data-value="laos">Laos</li> 


                    <li data-value="latvia">Latvia</li> 


                    <li data-value="lebanon">Lebanon</li> 


                    <li data-value="lesotho">Lesotho</li> 


                    <li data-value="liberia">Liberia</li> 


                    <li data-value="libya">Libya</li> 


                    <li data-value="liechtenstein">Liechtenstein</li> 


                    <li data-value="lithuania">Lithuania</li> 


                    <li data-value="luxembourg">Luxembourg</li> 


                    <li data-value="north-macedonia">North Macedonia</li> 


                    <li data-value="madagascar">Madagascar</li> 


                    <li data-value="malawi">Malawi</li> 


                    <li data-value="malaysia">Malaysia</li> 


                    <li data-value="maldives">Maldives</li> 


                    <li data-value="mali">Mali</li> 


                    <li data-value="malta">Malta</li> 


                    <li data-value="marshall-islands">Marshall Islands</li> 


                    <li data-value="mauritania">Mauritania</li> 


                    <li data-value="mauritius">Mauritius</li> 


                    <li data-value="mexico">Mexico</li> 


                    <li data-value="micronesia">Micronesia</li> 


                    <li data-value="moldova">Moldova</li> 


                    <li data-value="monaco">Monaco</li> 


                    <li data-value="mongolia">Mongolia</li> 


                    <li data-value="montenegro">Montenegro</li> 


                    <li data-value="morocco">Morocco</li> 


                    <li data-value="mozambique">Mozambique</li> 


                    <li data-value="myanmar">Myanmar</li> 


                    <li data-value="namibia">Namibia</li> 


                    <li data-value="nauru">Nauru</li> 


                    <li data-value="nepal">Nepal</li> 


                    <li data-value="netherlands">Netherlands</li> 


                    <li data-value="new-zealand">New Zealand</li> 


                    <li data-value="nicaragua">Nicaragua</li> 


                    <li data-value="niger">Niger</li> 


                    <li data-value="nigeria">Nigeria</li> 


                    <li data-value="north-korea">North Korea</li> 


                    <li data-value="norway">Norway</li> 


                    <li data-value="oman">Oman</li> 


                    <li data-value="pakistan">Pakistan</li> 


                    <li data-value="palau">Palau</li> 


                    <li data-value="palestine">Palestine</li> 


                    <li data-value="panama">Panama</li> 


                    <li data-value="papua-new-guinea">Papua New Guinea</li> 


                    <li data-value="paraguay">Paraguay</li> 


                    <li data-value="peru">Peru</li> 


                    <li data-value="philippines">Philippines</li> 


                    <li data-value="poland">Poland</li> 


                    <li data-value="portugal">Portugal</li> 


                    <li data-value="qatar">Qatar</li> 


                    <li data-value="romania">Romania</li> 


                    <li data-value="russia">Russia</li> 


                    <li data-value="rwanda">Rwanda</li> 


                    <li data-value="saint-kitts-and-nevis"> 


                        Saint Kitts and Nevis 


                    </li> 


                    <li data-value="saint-lucia">Saint Lucia</li> 


                    <li data-value="saint-vincent-and-the-grenadines"> 


                        Saint Vincent and the Grenadines 


                    </li> 


                    <li data-value="samoa">Samoa</li> 


                    <li data-value="san-marino">San Marino</li> 


                    <li data-value="sao-tome-and-principe"> 


                        Sao Tome and Principe 


                    </li> 


                    <li data-value="saudi-arabia">Saudi Arabia</li> 


                    <li data-value="senegal">Senegal</li> 


                    <li data-value="serbia">Serbia</li> 


                    <li data-value="seychelles">Seychelles</li> 


                    <li data-value="sierra-leone">Sierra Leone</li> 


                    <li data-value="singapore">Singapore</li> 


                    <li data-value="slovakia">Slovakia</li> 


                    <li data-value="slovenia">Slovenia</li> 


                    <li data-value="solomon-islands">Solomon Islands</li> 


                    <li data-value="somalia">Somalia</li> 


                    <li data-value="south-africa">South Africa</li> 


                    <li data-value="south-korea">South Korea</li> 


                    <li data-value="south-sudan">South Sudan</li> 


                    <li data-value="spain">Spain</li> 


                    <li data-value="sri-lanka">Sri Lanka</li> 


                    <li data-value="sudan">Sudan</li> 


                    <li data-value="suriname">Suriname</li> 


                    <li data-value="sweden">Sweden</li> 


                    <li data-value="switzerland">Switzerland</li> 


                    <li data-value="syria">Syria</li> 


                    <li data-value="taiwan">Taiwan</li> 


                    <li data-value="tajikistan">Tajikistan</li> 


                    <li data-value="tanzania">Tanzania</li> 


                    <li data-value="thailand">Thailand</li> 


                    <li data-value="togo">Togo</li> 


                    <li data-value="tonga">Tonga</li> 


                    <li data-value="trinidad-and-tobago"> 


                        Trinidad and Tobago 


                    </li> 


                    <li data-value="tunisia">Tunisia</li> 


                    <li data-value="turkey">Turkey</li> 


                    <li data-value="turkmenistan">Turkmenistan</li> 


                    <li data-value="tuvalu">Tuvalu</li> 


                    <li data-value="uganda">Uganda</li> 


                    <li data-value="ukraine">Ukraine</li> 


                    <li data-value="united-arab-emirates"> 


                        United Arab Emirates 


                    </li> 


                    <li data-value="united-kingdom">United Kingdom</li> 


                    <li data-value="united-states">United States</li> 


                    <li data-value="uruguay">Uruguay</li> 


                    <li data-value="uzbekistan">Uzbekistan</li> 


                    <li data-value="vanuatu">Vanuatu</li> 


                    <li data-value="vatican-city">Vatican City</li> 


                    <li data-value="venezuela">Venezuela</li> 


                    <li data-value="vietnam">Vietnam</li> 


                    <li data-value="yemen">Yemen</li> 


                    <li data-value="zambia">Zambia</li> 


                    <li data-value="zimbabwe">Zimbabwe</li> 


                </ul> 


            </ul> 


        </div> 


        <div class="selected-option">Select an option</div> 


        <button id="clear-button">Clear Selection</button> 


    </div> 


    <script src="script.js"></script> 


</body> 


  


</html>



















                        







                        









CSS














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















/* Reset some default styles */


* { 


    margin: 0; 


    padding: 0; 


    box-sizing: border-box; 


} 


  


/* Center the custom select */


body { 


    display: flex; 


    justify-content: center; 


    align-items: center; 


    height: 100vh; 


    background-color: #f0f0f0; 


} 


  


/* Custom select styles */


.main { 


    position: relative; 


    width: 350px; 


    height: 387px; 


    background-color: #fff; 


    border-radius: 20px; 


    box-shadow: 0px 2px 5px rgba(0, 0, 0, 1); 


    overflow: hidden; 


} 


  


.selectBox { 


    position: relative; 


} 


  


.search-box { 


    width: 100%; 


    padding: 10px; 


    border: none; 


    border-bottom: 1px solid #ccc; 


    outline: none; 


    font-size: 16px; 


} 


  


.center-text { 


    text-align: center; 


    color: green; 


} 


  


  


.options { 


    list-style: none; 


    padding: 0; 


    max-height: 250px; 


    overflow-y: auto; 


    border-bottom: 1px solid #ccc; 


} 


  


.options li { 


    padding: 10px; 


    cursor: pointer; 


} 


  


.options li:hover { 


    background-color: #f0f0f0; 


} 


  


.selected-option { 


    padding: 10px; 


    cursor: pointer; 


} 


  


#clear-button { 


    background-color: #ff6347; 


    color: white; 


    padding: 8px 16px; 


    border: none; 


    border-radius: 4px; 


    cursor: pointer; 


} 


  


#clear-button:hover { 


    background-color: #ff0000; 


}



















                        







                        










Output:


gif
Output


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Create a Wikipedia Search using HTML CSS and JavaScript
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                How to remove all the options of a select box and then add one option and select it using JQuery ?
            

        
    
        
            

                How to Create an Animated Search Box using HTML and CSS ?
            

        
    
        
            

                How to add default search text to search box in HTML with JavaScript ?
            

        
    
        
            

                Create a Mobile Toggle Navigation Menu using HTML, CSS and JavaScript
            

        
    
        
            

                How to Create a Modal Box using HTML CSS and JavaScript ?
            

        
    
        
            

                How to create Popup Box using HTML, CSS and JavaScript ?
            

        
    
        
            

                How to create Cookie Consent Box using HTML CSS and JavaScript ?
            

        
    
        
            

                Create a Custom Checkbox using HTML CSS and JavaScript
            

        
    
        
            

                Foundation CSS Menu Vertical Menu
            

        
    
        
            

                How to add custom filter in search Box in ReactJS?
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
P

        

            
        

        

                                    


                                    

                                        pankaj_gupta_gfg                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox