javascript typing suggestions and autocomplete

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.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

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.

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here