{"id":5414,"date":"2020-02-11T15:33:07","date_gmt":"2020-02-11T15:33:07","guid":{"rendered":"https:\/\/webdevtrick.com\/?p=5414"},"modified":"2020-02-11T15:33:07","modified_gmt":"2020-02-11T15:33:07","slug":"javascript-typing-suggestions","status":"publish","type":"post","link":"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/","title":{"rendered":"JavaScript Typing Suggestions and Autocomplete | Predictive Text Program"},"content":{"rendered":"<p><strong>How we can create a program for text suggestions on typing using JS? Solution: See this JavaScript Typing Suggestions and Autocomplete, Predictive Text Program.<\/strong><\/p>\n<p>Previously I have shared some <span><a href=\"https:\/\/webdevtrick.com\/tag\/typing-effect\/\" target=\"_blank\" rel=\"noopener noreferrer\">typing effect<\/a><\/span> programs, but this is an <strong>autocomplete and text suggestions<\/strong> program on <strong>typing<\/strong>. Basically, <strong>Autocomplete<\/strong> or <strong>text completion<\/strong> is a feature in which a program<strong> predicts the rest of the characters<\/strong> a user is typing. Users can choose a <strong>suggestion<\/strong> for<strong> autocomplete by<\/strong> pressing the <strong>tab key<\/strong>. This type of program also known as a <strong>predictive text program<\/strong>. Because it predicts the rest of the text and <strong>suggests<\/strong> to the user.<\/p>\n<p>Today you will learn to create a<strong> predictive text program<\/strong> using HTML, CSS, and JS. Basically, there is a <strong><span><a href=\"https:\/\/webdevtrick.com\/tag\/text\" target=\"_blank\" rel=\"noopener noreferrer\">text<\/a><\/span> input<\/strong> and when you will start type a web development related queries like code name it will<strong> give suggestion<\/strong> and it will <strong>autocomplete on tab keypress<\/strong>. There are some icons that will reveal when you will start typing like you will see a <strong>tab key icon<\/strong> when it <strong>suggests a word<\/strong> and when you will type a text manually then <strong>enter icon<\/strong>\u00a0will reveal.<\/p>\n<p>So, Today I am sharing <strong>JavaScript Typing Suggestions<\/strong> and <strong>Autocomplete<\/strong> program. There I have used JavaScript to store words or text for <strong>auto-suggestions<\/strong> and autocomplete on <span><a href=\"https:\/\/webdevtrick.com\/javascript-keycode-detect\/\" target=\"_blank\" rel=\"noopener noreferrer\">keypress<\/a><\/span> action, and HTML CSS for\u00a0creating 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.<\/p>\n<p>If you are thinking now how this <strong>predictive word<\/strong> program actually is, then see the preview given below.<\/p>\n<h3>Preview Of Predictive Text Program<\/h3>\n<p>See this video preview to getting an idea of how this text autocomplete program looks like.<\/p>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-5414-1\" width=\"640\" height=\"322\" loop autoplay preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/auto-typing-suggestions.mp4?_=1\" \/><a href=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/auto-typing-suggestions.mp4\">https:\/\/webdevtrick.com\/wp-content\/uploads\/auto-typing-suggestions.mp4<\/a><\/video><\/div>\n<a class=\"maxbutton-2 maxbutton maxbutton-demo\" target=\"_blank\" rel=\"noopener\" href=\"http:\/\/webdevtrick.com\/demos\/javascript-typing-suggestions\/\"><span class='mb-text'>Live Demo<\/span><\/a>\n<p>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 <strong>source code<\/strong> of its.<\/p>\n<p><span style=\"font-size: 14pt;\">You May Also Like:<\/span><\/p>\n<ul>\n \t<span><\/p>\n<li><a href=\"https:\/\/webdevtrick.com\/image-upload-with-preview\/\" target=\"_blank\" rel=\"noopener noreferrer\">Image Upload and Preview<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/custom-wikipedia-search-engine\/\" target=\"_blank\" rel=\"noopener noreferrer\">Wikipedia Search Engine<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/jquery-password-strength-checker\/\" target=\"_blank\" rel=\"noopener noreferrer\">Password Strength Checker<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/credit-card-details-form\/\" target=\"_blank\" rel=\"noopener noreferrer\">Credit Card Details Form<\/a><\/li>\n<p><\/span>\n<\/ul>\n<h2>JavaScript Typing Suggestions and Autocomplete Source Code<\/h2>\n<p>Before<strong> sharing source code<\/strong>, let&#8217;s talk about it. First I have created the main div for the program with class name &#8216;app&#8217; 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 <span><a href=\"https:\/\/webdevtrick.com\/tag\/svg\" target=\"_blank\" rel=\"noopener noreferrer\">SVG<\/a><\/span> shapes I have placed SVG tags and linked the icons with the target method, later I have created the shapes outside the main div.<\/p>\n<p>Now using<strong> CSS<\/strong> 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 <span><a href=\"https:\/\/webdevtrick.com\/tag\/css-animation\" target=\"_blank\" rel=\"noopener noreferrer\">animation<\/a><\/span> effect, also used transform command for the icons reveal and hide.<\/p>\n<p>JavaScript handling here all features of the program like <strong>word suggestion, autocomplete, icon reveal<\/strong> and hide. JS fetched elements using <span class=\"lang:default decode:true crayon-inline \">document.querySelector<\/span> command and stored in const. After that, I have <strong>stored<\/strong> many <strong>words<\/strong> related to <span><a href=\"https:\/\/webdevtrick.com\/web-development\/\" target=\"_blank\" rel=\"noopener noreferrer\">web development<\/a><\/span> and program in an array. Also, I have used<strong> keycode commands<\/strong> to <strong>detect<\/strong> backspace, enter, tab, arrow up, arrow down, and space<strong> keys<\/strong>. Then I have used JS <span class=\"lang:default decode:true crayon-inline\">if{} else{}<\/span> statements to create the functions.<\/p>\n<p>Left all other things you will understand after <strong>getting the codes<\/strong>, I can&#8217;t explain all in writing. For creating this program you have to create 3 files. First file for <strong>HTML<\/strong>, second for<strong> CSS<\/strong>, and third file for<strong> JavaScript<\/strong>. Follow the steps to creating this program without any error.<\/p>\n<p><span style=\"font-size: 14pt;\">index.html<\/span><\/p>\n<p>Create an HTML file named <em><strong>&#8216;index.html&#8217;<\/strong><\/em> and put these codes given here.<\/p>\n<pre class=\"height-set:true height:750 lang:xhtml decode:true\" title=\"index.html\">&lt;!DOCTYPE html&gt;\r\n&lt;!-- Code By Webdevtrick ( https:\/\/webdevtrick.com ) --&gt;\r\n&lt;html lang=\"en\" &gt;\r\n&lt;head&gt;\r\n  &lt;meta charset=\"UTF-8\"&gt;\r\n  &lt;title&gt;Typing Suggestions | Webdevtrick.com&lt;\/title&gt;\r\n  &lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Quicksand&amp;display=swap\" rel=\"stylesheet\"&gt;\r\n  &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n&lt;div class=\"app\"&gt;\r\n\t&lt;div class=\"input-container\"&gt;\r\n\t\t&lt;input type=\"text\" name=\"text\" id=\"text\" placeholder=\"Type Here\" autocomplete=\"off\"&gt;\r\n\t\t&lt;span class=\"suggestion-container\"&gt;&lt;\/span&gt;\r\n\t\t&lt;div class=\"icons-container\"&gt;\r\n\t\t\t&lt;div class=\"icon tab-key hidden\"&gt;\r\n\t\t\t\t&lt;svg&gt;\r\n\t\t\t\t\t&lt;use xlink:href=\"#tab-key\"&gt;&lt;\/use&gt;\r\n\t\t\t\t&lt;\/svg&gt;\r\n\t\t\t&lt;\/div&gt;\r\n\t\t\t&lt;div class=\"icon enter-key hidden\"&gt;\r\n\t\t\t\t&lt;svg&gt;\r\n\t\t\t\t\t&lt;use xlink:href=\"#enter-key\"&gt;&lt;\/use&gt;\r\n\t\t\t\t&lt;\/svg&gt;\r\n\t\t\t&lt;\/div&gt;\r\n\t\t&lt;\/div&gt;\r\n\t&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;svg class=\"icons\"&gt;\r\n\t&lt;symbol id=\"tab-key\" viewBox=\"0 0 448 448\"&gt;\r\n\t\t&lt;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 \r\n\t\t\t\t\t\t\t  \" \/&gt;\r\n\t\t&lt;rect x=\"405.333\" y=\"96\" width=\"42.667\" height=\"256\" \/&gt;\r\n\t&lt;\/symbol&gt;\r\n\t&lt;symbol id=\"enter-key\" viewBox=\"0 0 280.823 280.823\"&gt;\r\n\t\t&lt;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\r\n\t\t\t\t\t10.029-10.029 10.029h-212.34l45.877-45.877-14.182-14.182-70.089 70.088 70.206 70.206\r\n\t\t\t\t\t14.182-14.182-45.994-45.994h212.341c16.592 0 30.088-13.497\r\n\t\t\t\t\t30.088-30.088v-80.216c0-16.592-13.497-30.088-30.089-30.088z\" \/&gt;\r\n\t&lt;\/symbol&gt;\r\n&lt;\/svg&gt;\r\n\r\n\r\n  &lt;script  src=\"function.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><span style=\"font-size: 14pt;\">style.css<\/span><\/p>\n<p>Now create a CSS file named &#8216;<em><strong>style.css<\/strong><\/em>&#8216; and put these codes given here.<\/p>\n<pre class=\"height-set:true height:750 lang:css decode:true \" title=\"style.css\">\/* Code By Webdevtrick ( https:\/\/webdevtrick.com ) *\/\r\n* {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n::-moz-selection {\r\n  color: #222;\r\n  background: rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n::selection {\r\n  color: #222;\r\n  background: rgba(0, 0, 0, 0.12);\r\n}\r\n\r\nbody {\r\n  width: 100%;\r\n  height: 100vh;\r\n  overflow: hidden;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  background: #ff3939;\r\n}\r\n\r\ninput {\r\n  outline: none;\r\n  border: 0;\r\n}\r\n\r\n.icons {\r\n  display: none;\r\n}\r\n\r\n.app {\r\n  width: 400px;\r\n  height: 400px;\r\n  display: grid;\r\n  place-items: center;\r\n}\r\n.app .input-container {\r\n  position: relative;\r\n  width: 360px;\r\n  height: 65px;\r\n  border-radius: 10px;\r\n  background: #fff;\r\n  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);\r\n  backface-visibility: hidden;\r\n  transform: translateZ(0) scale(1, 1);\r\n}\r\n.app .input-container.animate {\r\n  animation: stretch-animation 800ms ease;\r\n}\r\n.app .input-container [type=\"text\"] {\r\n  position: absolute;\r\n  width: 360px;\r\n  height: 65px;\r\n  color: #ff3939;\r\n  font-family: 'Quicksand', sans-serif;\r\n  font-size: 18px;\r\n  letter-spacing: 2px;\r\n  padding: 0px 45px 0px 18px;\r\n  caret-color: #000;\r\n  background: transparent;\r\n  z-index: 5;\r\n}\r\n.app .input-container [type=\"text\"]::placeholder {\r\n  color: rgba(34, 34, 34, 0.55);\r\n}\r\n.app .input-container .suggestion-container {\r\n  width: 360px;\r\n  height: 65px;\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  color: #1da1f2;\r\n  font-family: 'Quicksand', sans-serif;\r\n  font-size: 18px;\r\n  letter-spacing: 2px;\r\n  padding: 0px 45px 0px 18px;\r\n  pointer-events: none;\r\n  z-index: 4;\r\n}\r\n.app .input-container .icon {\r\n  position: absolute;\r\n  width: 20px;\r\n  height: 20px;\r\n  right: 20px;\r\n  top: 50%;\r\n  transform: translateX(0%) translateY(-50%);\r\n  opacity: 1;\r\n  transition: all 180ms ease-in;\r\n  z-index: 10;\r\n}\r\n.app .input-container .icon.hidden {\r\n  transform: translateX(80%) translateY(-50%);\r\n  opacity: 0;\r\n}\r\n.app .input-container .icon svg {\r\n  width: 100%;\r\n  height: 100%;\r\n  fill: #222;\r\n  pointer-events: none;\r\n}\r\n\r\n@keyframes stretch-animation {\r\n  0% {\r\n    transform: scale(1, 1);\r\n  }\r\n  10% {\r\n    transform: scale(1.02, 0.98);\r\n  }\r\n  30% {\r\n    transform: scale(0.98, 1.02);\r\n  }\r\n  50% {\r\n    transform: scale(1.02, 0.98);\r\n  }\r\n  100% {\r\n    transform: scale(1, 1);\r\n  }\r\n}\r\n<\/pre>\n<p><span style=\"font-size: 14pt;\">function.js<\/span><\/p>\n<p>The final step, create a JavaScript file named &#8216;<em><strong>function.js<\/strong><\/em>&#8216; and put the codes.<\/p>\n<pre class=\"height-set:true height:750 lang:js decode:true \" title=\"function.js\">\/\/ Code By Webdevtrick ( https:\/\/webdevtrick.com )\r\nconsole.clear();\r\n\r\nconst inputContainerEl = document.querySelector(\".input-container\");\r\nconst textInputEl = document.querySelector(\"input#text\");\r\nconst suggestionEl = document.querySelector(\".suggestion-container\");\r\nconst svgTabIcon = document.querySelector(\".icon.tab-key\");\r\nconst svgEnterIcon = document.querySelector(\".icon.enter-key\");\r\n\r\nconst ENTER_KEYCODE = 13;\r\nconst TAB_KEYCODE = 9;\r\nconst BACKSPACE_KEYCODE = 8;\r\nconst UP_ARROW_KEYCODE = 38;\r\nconst DOWN_ARROW_KEYCODE = 40;\r\nconst SPACE_KEYCODE = 32;\r\n\r\nlet wordsArray = [\r\n\t\"html\",\r\n\t\"css\",\r\n\t\"javascript\",\r\n\t\"jquery\",\r\n\t\"ajax\",\r\n\t\"react\",\r\n\t\"angular\",\r\n\t\"node js\",\r\n\t\"express js\",\r\n\t\"redux\",\r\n\t\"chart js\",\r\n\t\"bootstrap\",\r\n\t\"php\",\r\n\t\"yii\",\r\n\t\"laravel\",\r\n\t\"codigniter\",\r\n\t\"mysql\",\r\n\t\"mongo db\",\r\n\t\"asp .net\",\r\n\t\"java\",\r\n\t\"python\",\r\n\t\"django\",\r\n\t\"ruby\",\r\n\t\"c++\",\r\n\t\"webpack\",\r\n\t\"hammer js\",\r\n\t\"http\",\r\n\t\"server\",\r\n\t\"programming\",\r\n\t\"artificial inteligence\",\r\n\t\"development\",\r\n\t\"website\",\r\n\t\"app\",\r\n\t\"frontend\",\r\n\t\"backend\",\r\n\t\"cross platform\",\r\n\t\"xml\",\r\n\t\"api\",\r\n\t\"algorithm\",\r\n\t\"ssl\",\r\n\t\"enrypt\",\r\n\t\"decrypt\",\r\n\t\"code\",\r\n];\r\nlet suggestedWord = \"\";\r\nlet suggestedWordsArray = [];\r\nlet currentWordIndex = 0;\r\nlet insertText = false;\r\n\r\ntextInputEl.addEventListener(\"input\", e =&gt; {\r\n\tif (e.data != \" \") {\r\n\t\tinsertText = true;\r\n\t}\r\n\tif (insertText == false) {\r\n\t\ttextInputEl.value = \"\";\r\n\t}\r\n\r\n\tlet inputValue = e.target.value;\r\n\tsuggestedWordsArray = filterArray(wordsArray, inputValue);\r\n\tsuggestedWord = suggestedWordsArray[0];\r\n\r\n\tif (suggestedWord != undefined) {\r\n\t\tsuggestionEl.innerHTML = suggestedWord;\r\n\t}\r\n\r\n\tif (inputValue.length == 0 || suggestedWordsArray.length == 0) {\r\n\t\tsuggestionEl.innerHTML = \"\";\r\n\t}\r\n\r\n\tif (suggestedWordsArray.length != 0) {\r\n\t\tsvgTabIcon.classList.remove(\"hidden\");\r\n\t\tsvgEnterIcon.classList.add(\"hidden\");\r\n\t} else {\r\n\t\tsvgTabIcon.classList.add(\"hidden\");\r\n\t\tsvgEnterIcon.classList.remove(\"hidden\");\r\n\t}\r\n\r\n\tif (inputValue.length == 0 || inputValue == suggestedWord) {\r\n\t\tsvgTabIcon.classList.add(\"hidden\");\r\n\t\tsvgEnterIcon.classList.add(\"hidden\");\r\n\t}\r\n\r\n\tif (textInputEl.value.length == 0) {\r\n\t\tinsertText = false;\r\n\t}\r\n});\r\n\r\ntextInputEl.addEventListener(\"keydown\", e =&gt; {\r\n\tif (e.keyCode == ENTER_KEYCODE) {\r\n\t\tif (textInputEl.value.length == 0) return;\r\n\t\tlet inputValue = textInputEl.value;\r\n\t\tlet words = inputValue.split(\" \");\r\n\t\tfor (let i in words) {\r\n\t\t\tif (words[i].length != 0) {\r\n\t\t\t\twordsArray.push(words[i]);\r\n\t\t\t\ttextInputEl.value = \"\";\r\n\t\t\t\tsuggestionEl.innerHTML = \"\";\r\n\t\t\t}\r\n\t\t}\r\n\t\twordsArray = removeDuplicatesFromArray(wordsArray);\r\n\t\tinputContainerEl.classList.add(\"animate\");\r\n\t\tsvgTabIcon.classList.add(\"hidden\");\r\n\t\tsvgEnterIcon.classList.add(\"hidden\");\r\n\t\tremoveClassAfterAnimationCompletes(inputContainerEl, \"animate\");\r\n\t}\r\n\r\n\tif (textInputEl.value.length != 0) {\r\n\t\tif (e.keyCode == UP_ARROW_KEYCODE) {\r\n\t\t\tif (currentWordIndex == 0) return;\r\n\t\t\tcurrentWordIndex--;\r\n\t\t\tsuggestionEl.innerHTML = suggestedWordsArray[currentWordIndex];\r\n\t\t}\r\n\r\n\t\tif (e.keyCode == DOWN_ARROW_KEYCODE) {\r\n\t\t\tif (currentWordIndex == suggestedWordsArray.length - 1) return;\r\n\t\t\tcurrentWordIndex++;\r\n\t\t\tsuggestionEl.innerHTML = suggestedWordsArray[currentWordIndex];\r\n\t\t}\r\n\r\n\t\tif (e.keyCode == BACKSPACE_KEYCODE) {\r\n\t\t\tcurrentWordIndex = 0;\r\n\t\t}\r\n\t}\r\n\r\n\tif (suggestedWord != undefined &amp;&amp; suggestedWord != \"\") {\r\n\t\tif (e.keyCode == TAB_KEYCODE) {\r\n\t\t\te.preventDefault();\r\n\t\t\ttextInputEl.value = suggestedWordsArray[currentWordIndex];\r\n\t\t\tsuggestionEl.innerHTML = \"\";\r\n\t\t\tsvgTabIcon.classList.add(\"hidden\");\r\n\t\t\tsvgEnterIcon.classList.add(\"hidden\");\r\n\t\t}\r\n\t}\r\n});\r\n\r\nremoveClassAfterAnimationCompletes(inputContainerEl, \"animate\");\r\n\r\nfunction removeClassAfterAnimationCompletes(el, className) {\r\n\tlet elStyles = window.getComputedStyle(inputContainerEl);\r\n\tsetTimeout(function() {\r\n\t\tel.classList.remove(className);\r\n\t}, +elStyles.animationDuration.replace(\"s\", \"\") * 1000);\r\n}\r\n\r\nfunction filterArray(array, item, reverse = false) {\r\n\tif (reverse) {\r\n\t\treturn array\r\n\t\t\t.filter(word =&gt; compareTwoStrings(word, item))\r\n\t\t\t.sort((a, b) =&gt; a.length - b.length);\r\n\t} else {\r\n\t\treturn array\r\n\t\t\t.filter(word =&gt; compareTwoStrings(word, item))\r\n\t\t\t.sort((a, b) =&gt; b.length - a.length);\r\n\t}\r\n}\r\n\r\nfunction removeDuplicatesFromArray(array) {\r\n\treturn [...new Set(array.map(i =&gt; i))];\r\n}\r\n\r\nfunction compareTwoStrings(string, subString) {\r\n\tlet temp = string.split(\"\", subString.length).join(\"\");\r\n\tif (subString == temp) return subString;\r\n}<\/pre>\n<p>That&#8217;s It. Now you have successfully created<strong> JavaScript Typing Suggestions<\/strong> and <strong>Autocomplete<\/strong>, <strong>Predictive Text Program<\/strong>. If you have any doubt or question comment down below.<\/p>\n<p><span style=\"font-family: impact, sans-serif;\">Thanks For Visiting, Keep Visiting.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5415,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[43,42,46],"tags":[516,515,244,61,164,67,332,207,387],"class_list":["post-5414","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html","category-javascript","tag-auto-suggestions","tag-autocomplete","tag-input","tag-javascript-tips-and-tricks","tag-key-code","tag-source-code","tag-svg","tag-text","tag-text-animations"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JavaScript Typing Suggestions and Autocomplete | Predictive Text Program<\/title>\n<meta name=\"description\" content=\"Want to create suggest word program? Check out this JavaScript Typing Suggestions and Autocomplete, Predictive Text Program. Get demo and source code now.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Typing Suggestions and Autocomplete | Predictive Text Program\" \/>\n<meta property=\"og:description\" content=\"Want to create suggest word program? Check out this JavaScript Typing Suggestions and Autocomplete, Predictive Text Program. Get demo and source code now.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Dev Trick\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webdevtrick\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-11T15:33:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/javascript-typing-suggestions.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"shaan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"shaan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/\"},\"author\":{\"name\":\"shaan\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3\"},\"headline\":\"JavaScript Typing Suggestions and Autocomplete | Predictive Text Program\",\"datePublished\":\"2020-02-11T15:33:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/\"},\"wordCount\":723,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/webdevtrick.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/javascript-typing-suggestions.jpg\",\"keywords\":[\"auto suggestions\",\"autocomplete\",\"input\",\"javascript tips and tricks\",\"key code\",\"source code\",\"svg\",\"text\",\"text animations\"],\"articleSection\":[\"CSS\",\"HTML\",\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/\",\"url\":\"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/\",\"name\":\"JavaScript Typing Suggestions and Autocomplete | Predictive Text Program\",\"isPartOf\":{\"@id\":\"https:\/\/webdevtrick.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/javascript-typing-suggestions.jpg\",\"datePublished\":\"2020-02-11T15:33:07+00:00\",\"description\":\"Want to create suggest word program? Check out this JavaScript Typing Suggestions and Autocomplete, Predictive Text Program. Get demo and source code now.\",\"breadcrumb\":{\"@id\":\"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/#primaryimage\",\"url\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/javascript-typing-suggestions.jpg\",\"contentUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/javascript-typing-suggestions.jpg\",\"width\":1200,\"height\":630,\"caption\":\"javascript typing suggestions and autocomplete\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdevtrick.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Typing Suggestions and Autocomplete | Predictive Text Program\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdevtrick.com\/#website\",\"url\":\"https:\/\/webdevtrick.com\/\",\"name\":\"Web Dev Trick\",\"description\":\"HTML5, CSS3, JS, PHP Source Code &amp; Tutorial\",\"publisher\":{\"@id\":\"https:\/\/webdevtrick.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdevtrick.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webdevtrick.com\/#organization\",\"name\":\"Web Dev Trick\",\"url\":\"https:\/\/webdevtrick.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png\",\"contentUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png\",\"width\":512,\"height\":512,\"caption\":\"Web Dev Trick\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webdevtrick\/\",\"https:\/\/pinterest.com\/webdevtrick\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3\",\"name\":\"shaan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g\",\"caption\":\"shaan\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Typing Suggestions and Autocomplete | Predictive Text Program","description":"Want to create suggest word program? Check out this JavaScript Typing Suggestions and Autocomplete, Predictive Text Program. Get demo and source code now.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Typing Suggestions and Autocomplete | Predictive Text Program","og_description":"Want to create suggest word program? Check out this JavaScript Typing Suggestions and Autocomplete, Predictive Text Program. Get demo and source code now.","og_url":"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/","og_site_name":"Web Dev Trick","article_publisher":"https:\/\/www.facebook.com\/webdevtrick\/","article_published_time":"2020-02-11T15:33:07+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/javascript-typing-suggestions.jpg","type":"image\/jpeg"}],"author":"shaan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"shaan","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/#article","isPartOf":{"@id":"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/"},"author":{"name":"shaan","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3"},"headline":"JavaScript Typing Suggestions and Autocomplete | Predictive Text Program","datePublished":"2020-02-11T15:33:07+00:00","mainEntityOfPage":{"@id":"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/"},"wordCount":723,"commentCount":2,"publisher":{"@id":"https:\/\/webdevtrick.com\/#organization"},"image":{"@id":"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/javascript-typing-suggestions.jpg","keywords":["auto suggestions","autocomplete","input","javascript tips and tricks","key code","source code","svg","text","text animations"],"articleSection":["CSS","HTML","JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdevtrick.com\/javascript-typing-suggestions\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/","url":"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/","name":"JavaScript Typing Suggestions and Autocomplete | Predictive Text Program","isPartOf":{"@id":"https:\/\/webdevtrick.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/#primaryimage"},"image":{"@id":"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/javascript-typing-suggestions.jpg","datePublished":"2020-02-11T15:33:07+00:00","description":"Want to create suggest word program? Check out this JavaScript Typing Suggestions and Autocomplete, Predictive Text Program. Get demo and source code now.","breadcrumb":{"@id":"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdevtrick.com\/javascript-typing-suggestions\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/#primaryimage","url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/javascript-typing-suggestions.jpg","contentUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/javascript-typing-suggestions.jpg","width":1200,"height":630,"caption":"javascript typing suggestions and autocomplete"},{"@type":"BreadcrumbList","@id":"https:\/\/webdevtrick.com\/javascript-typing-suggestions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdevtrick.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript Typing Suggestions and Autocomplete | Predictive Text Program"}]},{"@type":"WebSite","@id":"https:\/\/webdevtrick.com\/#website","url":"https:\/\/webdevtrick.com\/","name":"Web Dev Trick","description":"HTML5, CSS3, JS, PHP Source Code &amp; Tutorial","publisher":{"@id":"https:\/\/webdevtrick.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdevtrick.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdevtrick.com\/#organization","name":"Web Dev Trick","url":"https:\/\/webdevtrick.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png","contentUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png","width":512,"height":512,"caption":"Web Dev Trick"},"image":{"@id":"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webdevtrick\/","https:\/\/pinterest.com\/webdevtrick\/"]},{"@type":"Person","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3","name":"shaan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g","caption":"shaan"}}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/5414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/comments?post=5414"}],"version-history":[{"count":8,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/5414\/revisions"}],"predecessor-version":[{"id":5424,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/5414\/revisions\/5424"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/media\/5415"}],"wp:attachment":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/media?parent=5414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/categories?post=5414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/tags?post=5414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}