<!DOCTYPE html>
<html>
<head>
<title>
Auto complete using Pure Javascript
</title>
</head>
<body>
<input type="text" list="datalist"
onkeyup="ac(this.value)">
<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>