feat: add input autocomplete example
what's new: - autocomplete example with south-american countries - added hover pattern when user tries to select some option
This commit is contained in:
Yuri Reis
parent
9988da9174
commit
4e2d382f9f
|
|
@ -1,82 +1,186 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>HTML Tips and Tricks - Inputs</title>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Chilanka&display=swap" rel="stylesheet">
|
||||
<link rel='stylesheet' type='text/css' media='screen' href='../main.css'>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Chilanka&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="../main.css" />
|
||||
|
||||
<style>
|
||||
#auto-complete-field {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#south-america-countries {
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.country {
|
||||
margin: 4px 8px;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.country:hover {
|
||||
background-color: darkcyan;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function showColor(event) {
|
||||
let colorHex = event.target.value;
|
||||
document.getElementById('colorMe').style.color = colorHex;
|
||||
function showColor(event) {
|
||||
let colorHex = event.target.value;
|
||||
document.getElementById("colorMe").style.color = colorHex;
|
||||
}
|
||||
|
||||
function loadTextsIntoDiv({ id = "", texts = [], textClass = "" }) {
|
||||
const el = document.getElementById(id);
|
||||
el.innerHTML = "";
|
||||
el.innerHTML = texts
|
||||
.map((text) => `<div class="${textClass}">${text}</div>`)
|
||||
.join("");
|
||||
}
|
||||
|
||||
function showCountries(value) {
|
||||
const countries = [
|
||||
"Brazil",
|
||||
"Argentina",
|
||||
"Colombia",
|
||||
"Peru",
|
||||
"Chile",
|
||||
"Venezuela",
|
||||
"Ecuador",
|
||||
"Bolivia",
|
||||
"Uruguay",
|
||||
"Paraguay",
|
||||
"Guyana",
|
||||
"Suriname",
|
||||
"French Guiana",
|
||||
"Aruba",
|
||||
"Curaçao",
|
||||
"Falkland Islands",
|
||||
"Trinidad and Tobago",
|
||||
].sort();
|
||||
|
||||
const text = value.trim().toLowerCase();
|
||||
const hasMatch = countries.some(
|
||||
(country) => country.toLowerCase() === text
|
||||
);
|
||||
|
||||
let selectedCounties = [];
|
||||
|
||||
if (text && !hasMatch) {
|
||||
selectedCounties = countries.filter((country) =>
|
||||
country.toLowerCase().includes(text)
|
||||
);
|
||||
}
|
||||
|
||||
loadTextsIntoDiv({
|
||||
id: "south-america-countries",
|
||||
texts: selectedCounties,
|
||||
textClass: "country",
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
<div class="demo">
|
||||
<a href="../index.html" class="home">
|
||||
<img src="../home.svg" alt="home" />
|
||||
</a>
|
||||
<h1>All about Inputs</h1>
|
||||
<a href="../index.html" class="home">
|
||||
<img src="../home.svg" alt="home" />
|
||||
</a>
|
||||
<h1>All about Inputs</h1>
|
||||
|
||||
<h2>Color picker</h2>
|
||||
<input type="color" onchange="showColor(event)">
|
||||
<p id="colorMe">Color Me!</p>
|
||||
<h2>Color picker</h2>
|
||||
<input type="color" onchange="showColor(event)" />
|
||||
<p id="colorMe">Color Me!</p>
|
||||
|
||||
<div class="box">
|
||||
<h2>Required</h2>
|
||||
<form>
|
||||
<label for="username1">Username:</label>
|
||||
<input type="text" id="username1" name="username" required>
|
||||
<input type="submit">
|
||||
</form>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Required</h2>
|
||||
<form>
|
||||
<label for="username1">Username:</label>
|
||||
<input type="text" id="username1" name="username" required />
|
||||
<input type="submit" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<h2>Autofocus</h2>
|
||||
<form>
|
||||
<label for="username2">Username:</label>
|
||||
<input type="text" id="username2" name="username" required autofocus>
|
||||
<input type="submit">
|
||||
</form>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Autofocus</h2>
|
||||
<form>
|
||||
<label for="username2">Username:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="username2"
|
||||
name="username"
|
||||
required
|
||||
autofocus
|
||||
/>
|
||||
<input type="submit" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<h2>Placeholder</h2>
|
||||
<form>
|
||||
<label for="username3">Username:</label>
|
||||
<input type="text" id="username3" name="username" placeholder="Enter your username">
|
||||
<input type="submit">
|
||||
</form>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Placeholder</h2>
|
||||
<form>
|
||||
<label for="username3">Username:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="username3"
|
||||
name="username"
|
||||
placeholder="Enter your username"
|
||||
/>
|
||||
<input type="submit" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<h2>E-mail</h2>
|
||||
<form>
|
||||
<label for="email">Username:</label>
|
||||
<input id="email" name="email" type="email" />
|
||||
<input type="submit">
|
||||
</form>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>E-mail</h2>
|
||||
<form>
|
||||
<label for="email">Username:</label>
|
||||
<input id="email" name="email" type="email" />
|
||||
<input type="submit" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<h2>Regex validations</h2>
|
||||
<form>
|
||||
<label for="password">Strong password($Password1234):</label>
|
||||
<input type="password"
|
||||
name="password"
|
||||
id="password"
|
||||
placeholder="6-20 chars, at least 1 digit, 1 uppercase and one lowercase letter"
|
||||
pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$" autofocus required>
|
||||
<button type="submit"> Test </button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Regex validations</h2>
|
||||
<form>
|
||||
<label for="password">Strong password($Password1234):</label>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
id="password"
|
||||
placeholder="6-20 chars, at least 1 digit, 1 uppercase and one lowercase letter"
|
||||
pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$"
|
||||
autofocus
|
||||
required
|
||||
/>
|
||||
<button type="submit">Test</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<h2>Auto Complete</h2>
|
||||
<form>
|
||||
<label for="auto-complete-field">South America Country:</label>
|
||||
<br />
|
||||
<form autocomplete="on">
|
||||
<input
|
||||
type="text"
|
||||
name="auto-complete-field"
|
||||
id="auto-complete-field"
|
||||
onkeyup="showCountries(this.value)"
|
||||
/>
|
||||
<div id="south-america-countries"></div>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue