Hello everyone. Welcome back to yet another exciting tutorial from Coding Artist. In today’s tutorial, we will learn – how to build input fields with predictive text. To create this project, we need HTML, CSS and Javascript. If you are looking for autosuggestions that is an input field with a drop-down of suggestive words check out this tutorial here.
I wouldn’t recommend this project for absolute javascript beginners. Also, you must have a basic knowledge of regex or at least how regex works to create this project.
I have a whole playlist on javascript project tutorials on my youtube channel. They consist of more than 50+ tutorials, each with source code. These tutorials vary from beginner-friendly to expert level. Do check them out here.
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 version of this tutorial here down below. I post new and exciting tutorials on my youtube channel every alternate day.
Along with that I also do post web development related resources, tips and tricks on my channel. So don’t forget to subscribe to Coding Artist, so you don’t miss any of these tutorials.
Project Folder Structure:
Before we start coding, we need to create the project folder and related files. So let us create them. In the first step, we create the project folder. We name the project folder Predictive Text.
Enclosed in this folder, we have three files. Firstly index.html, which is the HTML document. Next, we create a style.css file which is the stylesheet. And finally, we create script.js, which is our javascript file.
HTML:
We begin with the HTML section. Now copy the code provided to you below and paste it into your HTML file. This creates the structure we need for our project.
<!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="style.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="script.js"></script>
</body>
</html>
CSS:
Next, we move on to CSS. Again copy the code below and paste it into your stylesheet. We use CSS to style and properly position the elements.
* {
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:
Finally, all that is left is to add functionality to this input field. To achieve it, we use Javascript. Do copy the code provided below and paste it into your javascript file.
let words = [
"Apple",
"Pencil",
"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();
}
});
That’s it for this tutorial. I hope you enjoyed this tutorial. If you have any issues while creating this code, download the source code by clicking on the download button below. Also, don’t forget to drop your queries, suggestions and feedbacks in the comments below.
Happy Coding!
Can this be made to continue suggesting words not just for the first word? So for example if I had entered “red” then continued typing ” ap” it would suggest ” apple” and have “red apple” when the enter key is pressed.
‘download code’ button not working. thanks.