Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create an Autocomplete with JavaScript?
To create autocompletion in a form, the code is as follows −
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
* {
box-sizing: border-box;
}
body {
margin: 10px;
padding: 0px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.autocomplete {
position: relative;
display: inline-block;
}
input {
border: none;
background-color: #f1f1f1;
padding: 10px;
font-size: 16px;
border-radius: 4px;
}
input[type="text"] {
background-color: #e1f6fc;
width: 100%;
}
input[type="submit"] {
background-color: DodgerBlue;
color: #fff;
cursor: pointer;
}
.autocomplete-items {
position: absolute;
border-bottom: none;
border-top: none;
z-index: 99;
top: 100%;
left: 0;
right: 0;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
border: 1px solid #8e26d4;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
background-color: #e9e9e9;
}
.autocomplete-active {
background-color: rgb(30, 255, 169) !important;
color: #ffffff;
}
</style>
</head>
<body>
<h1>Autocomplete Example</h1>
<form autocomplete="off">
<div class="autocomplete" style="width:300px;">
<input id="searchField" type="text" name="animal" placeholder="Animals" />
</div>
<input type="submit" />
</form>
<script>
function autocomplete(searchEle, arr) {
var currentFocus;
searchEle.addEventListener("input", function(e) {
var divCreate,
b,
i,
fieldVal = this.value;
closeAllLists();
if (!fieldVal) {
return false;
}
currentFocus = -1;
divCreate = document.createElement("DIV");
divCreate.setAttribute("id", this.id + "autocomplete-list");
divCreate.setAttribute("class", "autocomplete-items");
this.parentNode.appendChild(divCreate);
for (i = 0; i <arr.length; i++) {
if ( arr[i].substr(0, fieldVal.length).toUpperCase() == fieldVal.toUpperCase() ) {
b = document.createElement("DIV");
b.innerHTML = "<strong>" + arr[i].substr(0, fieldVal.length) + "</strong>";
b.innerHTML += arr[i].substr(fieldVal.length);
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
b.addEventListener("click", function(e) {
searchEle.value = this.getElementsByTagName("input")[0].value;
closeAllLists();
});
divCreate.appendChild(b);
}
}
});
searchEle.addEventListener("keydown", function(e) {
var autocompleteList = document.getElementById(
this.id + "autocomplete-list"
);
if (autocompleteList)
autocompleteList = autocompleteList.getElementsByTagName("div");
if (e.keyCode == 40) {
currentFocus++;
addActive(autocompleteList);
}
else if (e.keyCode == 38) {
//up
currentFocus--;
addActive(autocompleteList);
}
else if (e.keyCode == 13) {
e.preventDefault();
if (currentFocus > -1) {
if (autocompleteList) autocompleteList[currentFocus].click();
}
}
});
function addActive(autocompleteList) {
if (!autocompleteList) return false;
removeActive(autocompleteList);
if (currentFocus >= autocompleteList.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = autocompleteList.length - 1;
autocompleteList[currentFocus].classList.add("autocomplete-active");
}
function removeActive(autocompleteList) {
for (var i = 0; i < autocompleteList.length; i++) {
autocompleteList[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
var autocompleteList = document.getElementsByClassName(
"autocomplete-items"
);
for (var i = 0; i < autocompleteList.length; i++) {
if (elmnt != autocompleteList[i] && elmnt != searchEle) {
autocompleteList[i].parentNode.removeChild(autocompleteList[i]);
}
}
}
document.addEventListener("click", function(e) {
closeAllLists(e.target);
});
}
var animals = ["giraffe","tiger", "lion", "dog","cow","bull","cat","cheetah"];
autocomplete(document.getElementById("searchField"), animals);
</script>
</body>
</html>
Output
The above code will produce the following output −
On typing something in the animals field −
Updated on: 2020-05-06T14:01:52+05:30
1K+ Views
Advertisements