In this article, we will make a Javascript auto-complete/ suggestion feature. There are many ways to make an autocomplete feature in JavaScript. We will be targeting two of them. One uses Vanilla JavaScript and the other by using a framework like jQuery.
Prerequisites:
Using Vanilla JavaScript (No frameworks): This method shows the results faster than the method of using frameworks.
Important functions:
- getElementsByTagName() Method: It is used to get elements by their tag name in HTML.
- createElement(“type”) Method: It is used to create an element of the given type.
- appendChild(node) Method: It appends the passed node at the end of the attached parent.
Example 1: In this example, we will use plain JavaScript to make suggestions.
<!DOCTYPE html> < html >
< head >
< title >
Auto complete using Pure Javascript
</ title >
</ head >
< body >
<!-- Onkeyup calls the function everytime
a key is released -->
< input type = "text" list = "datalist"
onkeyup = "ac(this.value)" >
<!-- This data list will be edited
through javascript -->
< datalist id = "datalist" >
< option value = "Delhi" ></ option >
< option value = "Ahemdabad" ></ option >
< option value = "Punjab" ></ option >
< option value = "Uttar Pradesh" ></ option >
< option value = "Himachal Pradesh" ></ option >
< option value = "Karnataka" ></ option >
< option value = "Kerala" ></ option >
< option value = "Maharashtra" ></ option >
< option value = "Gujrat" ></ option >
< option value = "Rajasthan" ></ option >
< option value = "Bihar" ></ option >
< option value = "Tamil Nadu" ></ option >
< option value = "Haryana" ></ option >
</ datalist >
< script type = "text/javascript" >
let tags = [
"Delhi",
"Ahmedabad",
"Punjab",
"Uttar Pradesh",
"Himachal Pradesh",
"Karnataka",
"Kerala",
"Maharashtra",
"Gujrat",
"Rajasthan",
"Bihar",
"Tamil Nadu",
"Haryana"
];
/* list of available options */
let n = tags.length; // length of datalist tags
function ac(value) {
// Setting datalist empty at the start
// of function. If we skip this step,
// same name will be repeated
document.getElementById('datalist').innerHTML = '';
// Input query length
l = value.length;
for (let i = 0; i < n ; i++) {
// Comparing if input string is existing
// in tags[i] string
if (((tags[i].toLowerCase()).indexOf(
value.toLowerCase())) > -1) {
let node = document.createElement("option");
let val = document.createTextNode(tags[i]);
node.appendChild(val);
// Creating and appending new elements
// in data list
document.getElementById("datalist")
.appendChild(node);
}
}
}
</ script >
</ body >
</ html >
|
Output:
Using jQuery: jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. It has an inbuilt autocomplete function that takes an id and a list of available tags.
Example 2: In this example, we will use jQuery to make suggestions.
<!doctype html> < html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1" >
< title >Autocomplete using jQuery</ title >
< link rel = "stylesheet" href =
"//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" >
< link rel = "stylesheet"
href = "/resources/demos/style.css" >
< script src =
</ script >
< script src =
</ script >
< script >
$(function () {
/* Making a list of available tags */
let tags = [
"Delhi",
"Ahmedabad",
"Punjab",
"Uttar Pradesh",
"Himachal Pradesh",
"Karnataka",
"Kerala",
"Maharashtra",
"Gujrat",
"Rajasthan",
"Bihar",
"Tamil Nadu",
"Haryana"
];
/* #the tags is the id of the input
element source: tags is the list of
available tags*/
$("#tags").autocomplete({
source: tags
});
});
</ script >
</ head >
< body >
< div class = "ui-widget" >
< input id = "tags" >
</ div >
</ body >
</ html >
|
Output: