Home Web Development JavaScript JavaScript Typing Suggestions and Autocomplete | Predictive Text Program

JavaScript Typing Suggestions and Autocomplete | Predictive Text Program

February 11, 2020

11824

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.

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.

<!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>

<!DOCTYPE html>

<head>

<title>Typing Suggestions | Webdevtrick.com</title>

</head>

<body>

<svg>

</svg>

</div>

<svg>

</svg>

</div>

<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

" />

</symbol>

<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>

</body>

</html>

style.css

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

/* 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);
  }
}

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.

// 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;
}

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.

2 COMMENTS

Piyush rajput April 24, 2021 At 8:17 am

here i am getting suggestion for 1st word only . no suggestion for rest words

Reply
- ankit April 30, 2021 At 10:00 am
  
  ha ha ha
  
  Reply

JavaScript Typing Suggestions and Autocomplete | Predictive Text Program

Preview Of Predictive Text Program

JavaScript Typing Suggestions and Autocomplete Source Code

2 COMMENTS

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY