How to create a select menu with search without JS

January 21, 2023

Is it possible to create a select menu with search options in pure html and css without using JavaScript.

I know there is a select tag in HTML https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select, but there is no search in it. I need to create a simple web page and I would not like to use JavaScript/PHP or libraries because I do not know these programming languages.

>Solution :

Yes, it is possible. If you use the <input> tag together with <datalist> instead of the <select> tag. In the <input> tag, you need to write the list attribute and come up with a name. This name will be the id for <datalist> as shown in the example.

<!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>Document</title>
  </head>
  <body>
    <input type="text" list="select" />

    <datalist id="select">
      <option value="item 1"></option>
      <option value="item 2"></option>
      <option value="item 3"></option>
      <option value="item 4"></option>
      <option value="item 5"></option>
      <option value="item 6"></option>
      <option value="item 7"></option>
      <option value="item 8"></option>
    </datalist>
  </body>
</html>

Using the <input> tag, you can search for items. And all this in pure HTML without JavaScript.