How we can create a program for text suggestions on typing using JS? Solution: See this JavaScript Typing Suggestions and Autocomplete, Predictive Text Program.
Previously I have shared some typing effect programs, but this is an autocomplete and text suggestions program on typing. Basically, Autocomplete or text completion is a feature in which a program predicts the rest of the characters a user is typing. Users can choose a suggestion for autocomplete by pressing the tab key. This type of program also known as a predictive text program. Because it predicts the rest of the text and suggests to the user.
Today you will learn to create a predictive text program using HTML, CSS, and JS. Basically, there is a text input and when you will start type a web development related queries like code name it will give suggestion and it will autocomplete on tab keypress. There are some icons that will reveal when you will start typing like you will see a tab key icon when it suggests a word and when you will type a text manually then enter icon will reveal.
So, Today I am sharing JavaScript Typing Suggestions and Autocomplete program. There I have used JavaScript to store words or text for auto-suggestions and autocomplete on keypress action, and HTML CSS for creating and styling the layout. You can use this program on your website for helping users to choose a page or product of your site. This is just an example, you can integrate it with backend database to create this program dynamic.
If you are thinking now how this predictive word program actually is, then see the preview given below.
Preview Of Predictive Text Program
See this video preview to getting an idea of how this text autocomplete program looks like.
Live Demo
Now you can see this program visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
JavaScript Typing Suggestions and Autocomplete Source Code
Before sharing source code, let’s talk about it. First I have created the main div for the program with class name ‘app’ and other elements inside it. Inside the app div, I have placed another div, a text input, a span, another div section for icons. The icons are based on SVG shapes I have placed SVG tags and linked the icons with the target method, later I have created the shapes outside the main div.
Now using CSS I have placed all the elements in the right place, as you can see in the preview. With CSS first I gave basic values like size, position, margin, padding, color, etc to the elements. There I have used CSS @keyframe command to create animation effect, also used transform command for the icons reveal and hide.
JavaScript handling here all features of the program like word suggestion, autocomplete, icon reveal and hide. JS fetched elements using document.querySelector command and stored in const. After that, I have stored many words related to web development and program in an array. Also, I have used keycode commands to detect backspace, enter, tab, arrow up, arrow down, and space keys. Then I have used JS if{} else{} statements to create the functions.
Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First file for HTML, second for CSS, and third file for JavaScript. Follow the steps to creating this program without any error.
index.html
Create an HTML file named ‘index.html’ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>Typing Suggestions | Webdevtrick.com</title> <link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="app"> <div class="input-container"> <input type="text" name="text" id="text" placeholder="Type Here" autocomplete="off"> <span class="suggestion-container"></span> <div class="icons-container"> <div class="icon tab-key hidden"> <svg> <use xlink:href="#tab-key"></use> </svg> </div> <div class="icon enter-key hidden"> <svg> <use xlink:href="#enter-key"></use> </svg> </div> </div> </div> </div> <svg class="icons"> <symbol id="tab-key" viewBox="0 0 448 448"> <polygon points="225.813,126.187 302.293,202.667 0,202.667 0,245.333 302.293,245.333 225.813,321.813 256,352 384,224 256,96 " /> <rect x="405.333" y="96" width="42.667" height="256" /> </symbol> <symbol id="enter-key" viewBox="0 0 280.823 280.823"> <path d="m250.734 40.137-90.265-.02v20.059h90.265c5.534 0 10.029 4.515 10.029 10.049v80.216c0 5.534-4.496 10.029-10.029 10.029h-212.34l45.877-45.877-14.182-14.182-70.089 70.088 70.206 70.206 14.182-14.182-45.994-45.994h212.341c16.592 0 30.088-13.497 30.088-30.088v-80.216c0-16.592-13.497-30.088-30.089-30.088z" /> </symbol> </svg> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ * { box-sizing: border-box; margin: 0; padding: 0; } ::-moz-selection { color: #222; background: rgba(0, 0, 0, 0.12); } ::selection { color: #222; background: rgba(0, 0, 0, 0.12); } body { width: 100%; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; background: #ff3939; } input { outline: none; border: 0; } .icons { display: none; } .app { width: 400px; height: 400px; display: grid; place-items: center; } .app .input-container { position: relative; width: 360px; height: 65px; border-radius: 10px; background: #fff; box-shadow: 0 6.7px 5.3px rgba(0, 0, 0, 0.044), 0 22.3px 17.9px rgba(0, 0, 0, 0.066), 0 100px 80px rgba(0, 0, 0, 0.11); backface-visibility: hidden; transform: translateZ(0) scale(1, 1); } .app .input-container.animate { animation: stretch-animation 800ms ease; } .app .input-container [type="text"] { position: absolute; width: 360px; height: 65px; color: #ff3939; font-family: 'Quicksand', sans-serif; font-size: 18px; letter-spacing: 2px; padding: 0px 45px 0px 18px; caret-color: #000; background: transparent; z-index: 5; } .app .input-container [type="text"]::placeholder { color: rgba(34, 34, 34, 0.55); } .app .input-container .suggestion-container { width: 360px; height: 65px; position: absolute; left: 0; top: 0; display: flex; align-items: center; color: #1da1f2; font-family: 'Quicksand', sans-serif; font-size: 18px; letter-spacing: 2px; padding: 0px 45px 0px 18px; pointer-events: none; z-index: 4; } .app .input-container .icon { position: absolute; width: 20px; height: 20px; right: 20px; top: 50%; transform: translateX(0%) translateY(-50%); opacity: 1; transition: all 180ms ease-in; z-index: 10; } .app .input-container .icon.hidden { transform: translateX(80%) translateY(-50%); opacity: 0; } .app .input-container .icon svg { width: 100%; height: 100%; fill: #222; pointer-events: none; } @keyframes stretch-animation { 0% { transform: scale(1, 1); } 10% { transform: scale(1.02, 0.98); } 30% { transform: scale(0.98, 1.02); } 50% { transform: scale(1.02, 0.98); } 100% { transform: scale(1, 1); } } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 |
// Code By Webdevtrick ( https://webdevtrick.com ) console.clear(); const inputContainerEl = document.querySelector(".input-container"); const textInputEl = document.querySelector("input#text"); const suggestionEl = document.querySelector(".suggestion-container"); const svgTabIcon = document.querySelector(".icon.tab-key"); const svgEnterIcon = document.querySelector(".icon.enter-key"); const ENTER_KEYCODE = 13; const TAB_KEYCODE = 9; const BACKSPACE_KEYCODE = 8; const UP_ARROW_KEYCODE = 38; const DOWN_ARROW_KEYCODE = 40; const SPACE_KEYCODE = 32; let wordsArray = [ "html", "css", "javascript", "jquery", "ajax", "react", "angular", "node js", "express js", "redux", "chart js", "bootstrap", "php", "yii", "laravel", "codigniter", "mysql", "mongo db", "asp .net", "java", "python", "django", "ruby", "c++", "webpack", "hammer js", "http", "server", "programming", "artificial inteligence", "development", "website", "app", "frontend", "backend", "cross platform", "xml", "api", "algorithm", "ssl", "enrypt", "decrypt", "code", ]; let suggestedWord = ""; let suggestedWordsArray = []; let currentWordIndex = 0; let insertText = false; textInputEl.addEventListener("input", e => { if (e.data != " ") { insertText = true; } if (insertText == false) { textInputEl.value = ""; } let inputValue = e.target.value; suggestedWordsArray = filterArray(wordsArray, inputValue); suggestedWord = suggestedWordsArray[0]; if (suggestedWord != undefined) { suggestionEl.innerHTML = suggestedWord; } if (inputValue.length == 0 || suggestedWordsArray.length == 0) { suggestionEl.innerHTML = ""; } if (suggestedWordsArray.length != 0) { svgTabIcon.classList.remove("hidden"); svgEnterIcon.classList.add("hidden"); } else { svgTabIcon.classList.add("hidden"); svgEnterIcon.classList.remove("hidden"); } if (inputValue.length == 0 || inputValue == suggestedWord) { svgTabIcon.classList.add("hidden"); svgEnterIcon.classList.add("hidden"); } if (textInputEl.value.length == 0) { insertText = false; } }); textInputEl.addEventListener("keydown", e => { if (e.keyCode == ENTER_KEYCODE) { if (textInputEl.value.length == 0) return; let inputValue = textInputEl.value; let words = inputValue.split(" "); for (let i in words) { if (words[i].length != 0) { wordsArray.push(words[i]); textInputEl.value = ""; suggestionEl.innerHTML = ""; } } wordsArray = removeDuplicatesFromArray(wordsArray); inputContainerEl.classList.add("animate"); svgTabIcon.classList.add("hidden"); svgEnterIcon.classList.add("hidden"); removeClassAfterAnimationCompletes(inputContainerEl, "animate"); } if (textInputEl.value.length != 0) { if (e.keyCode == UP_ARROW_KEYCODE) { if (currentWordIndex == 0) return; currentWordIndex--; suggestionEl.innerHTML = suggestedWordsArray[currentWordIndex]; } if (e.keyCode == DOWN_ARROW_KEYCODE) { if (currentWordIndex == suggestedWordsArray.length - 1) return; currentWordIndex++; suggestionEl.innerHTML = suggestedWordsArray[currentWordIndex]; } if (e.keyCode == BACKSPACE_KEYCODE) { currentWordIndex = 0; } } if (suggestedWord != undefined && suggestedWord != "") { if (e.keyCode == TAB_KEYCODE) { e.preventDefault(); textInputEl.value = suggestedWordsArray[currentWordIndex]; suggestionEl.innerHTML = ""; svgTabIcon.classList.add("hidden"); svgEnterIcon.classList.add("hidden"); } } }); removeClassAfterAnimationCompletes(inputContainerEl, "animate"); function removeClassAfterAnimationCompletes(el, className) { let elStyles = window.getComputedStyle(inputContainerEl); setTimeout(function() { el.classList.remove(className); }, +elStyles.animationDuration.replace("s", "") * 1000); } function filterArray(array, item, reverse = false) { if (reverse) { return array .filter(word => compareTwoStrings(word, item)) .sort((a, b) => a.length - b.length); } else { return array .filter(word => compareTwoStrings(word, item)) .sort((a, b) => b.length - a.length); } } function removeDuplicatesFromArray(array) { return [...new Set(array.map(i => i))]; } function compareTwoStrings(string, subString) { let temp = string.split("", subString.length).join(""); if (subString == temp) return subString; } |
That’s It. Now you have successfully created JavaScript Typing Suggestions and Autocomplete, Predictive Text Program. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
here i am getting suggestion for 1st word only . no suggestion for rest words
ha ha ha