Caleb/JSConf-dont_use_JS_for_that-Kilian_Valkhof
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Easy autosuggestions in input boxes

Browse Source
This commit is contained in:
Caleb Braaten 2024-07-25 12:35:20 -07:00
parent 9e00d551cc
commit ab6b288f58
1 changed files with 46 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
datalist.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Datalist</title>
<style>
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body>
<div class="container">
<h1>Datalist</h1>
<p>This project is demonstrating an input field with autosugestions.</p>
<br>
<div class="switch-container">
<h2>Basic Input</h2>
<label>
<input type="input" id="input-1">
Basic Input with no styling
</label>
<h2>Input with sugestions</h2>
<label>
<input list="framworks" id="input-2">
Input with sugestions
<datalist id="framworks">
<option value="React">
<option value="Angular">
<option value="Vue">
<option value="Svelte">
<option value="Ember">
<option value="Vanilla">
</datalist>
</label>
</div>
</div>
</body>
</html>