Predictive text input html | Html autocomplete from list | Html input autocomplete
Hello everyone. Welcome back to yet another exciting tutorial from IT in Hindi. In today’s tutorial, we will learn – how to build input fields with autocomplete from list. To create this project, we need HTML, CSS and JavaScript.
Video Tutorial:
If you are interested in coding along to a video tutorial rather than reading the blog post, you can check out the video on my channel.
I post new and exciting tutorials on my YouTube channel.
SUBSCRIBE FOR INTRESTING & INFORMATIVE VIDEOS.
Along with that I also do post web development related resources, tips and tricks on my channel. So don’t forget to subscribe to IT in Hindi, so you don’t miss any of these tutorials.
SOURCE CODE:
HTML CODE:
Step1- Copy and paste the HTML code mentioned below and save the file as "AutoText.html".
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Predictive Text</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="itinhindi.css" />
</head>
<body>
<div class="input-container">
<input
type="text"
id="input"
placeholder="Type something here.."
autocomplete="off"
/>
<span id="suggestion"></span>
</div>
<!-- Script -->
<script src="itinhindi.js"></script>
</body>
</html>
-------------------------------------------------------------------------------------------------
CSS CODE :
Step2- Copy and paste the CSS code below and save the file as "itinhindi.css".
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #2c8df6;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.input-container {
position: relative;
background-color: #ffffff;
width: 25em;
height: 4.4em;
border-radius: 5px;
}
input {
outline: none;
border: none;
background-color: transparent;
position: absolute;
width: inherit;
height: inherit;
color: #000000;
font-size: 25px;
padding: 0 18px;
z-index: 3;
}
#suggestion {
width: inherit;
height: inherit;
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: flex;
align-items: center;
padding: 0 18px;
font-size: 25px;
color: #868686;
}
@media screen and (max-width: 600px) {
.input-container {
width: 80vw;
}
}
-------------------------------------------------------------------------------------------------
JAVASCRIPT CODE:
Step3- Copy and paste the JavaScript code below and save the file as "itinhindi.js".
let words = [
"Apple",
"Aunt",
"ALPHA",
"Pencil",
"GOOD",
"GOOD NIGHT",
"GOOD MORNING",
"GOOD EVENING",
"Pen",
"Chair",
"Helmet",
"Grapes",
"Tub",
"Trophy",
"Cookie",
"Donut",
"Shirt",
"Bat",
"Ash",
"Bell",
"Chat",
"Ball",
"Eye",
"Fish",
"Zip",
"Game",
"Juice",
"Orange",
"Fan",
"Ice",
];
words.sort();
let input = document.getElementById("input");
let suggestion = document.getElementById("suggestion");
//Enter key code
const enterKey = 13;
window.onload = () => {
input.value = "";
clearSuggestion();
};
const clearSuggestion = () => {
suggestion.innerHTML = "";
};
const caseCheck = (word) => {
//Array of characters
word = word.split("");
let inp = input.value;
//loop through every character in ino
for (let i in inp) {
//if input character matches with character in word no need to change
if (inp[i] == word[i]) {
continue;
} else if (inp[i].toUpperCase() == word[i]) {
//if inp[i] when converted to uppercase matches word[i] it means word[i] needs to be lowercase
word.splice(i, 1, word[i].toLowerCase());
} else {
//word[i] needs to be uppercase
word.splice(i, 1, word[i].toUpperCase());
}
}
//array to string
return word.join("");
};
//Execute function on input
input.addEventListener("input", (e) => {
clearSuggestion();
//Convert input value to regex since string.startsWith() is case sensitive
let regex = new RegExp("^" + input.value, "i");
//loop through words array
for (let i in words) {
//check if input matches with any word in words array
if (regex.test(words[i]) && input.value != "") {
//Change case of word in words array according to user input
words[i] = caseCheck(words[i]);
//display suggestion
suggestion.innerHTML = words[i];
break;
}
}
});
//Complete predictive text on enter key
input.addEventListener("keydown", (e) => {
//When user presses enter and suggestion exists
if (e.keyCode == enterKey && suggestion.innerText != "") {
e.preventDefault();
input.value = suggestion.innerText;
//clear the suggestion
clearSuggestion();
}
});
---------------------------------------------------------------------
How to run the source code :-
Step1- Copy and paste the HTML code mentioned below and save the file as "AutoText.html".
Step2- Copy and paste the CSS code below and save the file as "itinhindi.css".
Step3- Copy and paste the JavaScript code below and save the file as "itinhindi.js".
Step4- Run "AutoText.html" file.
0 Comments