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.
CodePudding user response:
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.