Breaking News: Grepper is joining You.com. Read the official announcement!

html select input with search

Blasian answered on January 4, 2023 Popularity 10/10 Helpfulness 6/10

answer html select input with search

html select input with search

Comment

<!--create select-->
<form>
  <label for="mySelect">Choose a country:</label><br>
  <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for a country..">
  <select id="mySelect" onchange="myFunction()">
    <option value="AF">Afghanistan</option>
    <option value="AX">Åland Islands</option>
    <option value="AL">Albania</option>
    <option value="DZ">Algeria</option>
    <option value="AS">American Samoa</option>
    <option value="AD">Andorra</option>
    <option value="AO">Angola</option>
    <option value="AI">Anguilla</option>
    <option value="AQ">Antarctica</option>
    <option value="AG">Antigua and Barbuda</option>
    <!-- more options here -->
  </select>
</form>



<script>
function myFunction() {
  // Get the value of the input field
  var input = document.getElementById("myInput").value;
  // Get the select element
  var select = document.getElementById("mySelect");
  // Get the options
  var options = select.options;
  // Loop through the options
  for (var i = 0; i < options.length; i++) {
    var option = options[i];
    // If the option's text contains the input value, show it
    if (option.text.toUpperCase().indexOf(input.toUpperCase()) > -1) {
      option.style.display = "";
    } else {
      // Otherwise, hide it
      option.style.display = "none";
    }
  }
}
</script>

<!--This will create a select element with a search box that allows the user to filter the options in the select element based on the text they enter in the search box.-->

Popularity 10/10 Helpfulness 6/10 Language html

Source: Grepper

Tags: html html-select input search

Link to this answer
Share Copy Link

Contributed on Jan 04 2023

Blasian

0 Answers Avg Quality 2/10

html select input with search

Contents

More Related Answers

html select input with search

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.