If you want to add this feature who work something like When Someone start typing something in your websites address bar your website will Automatically Completed it and start Suggesting keyword related to your searched keyword.
If YES than this post gonna help you to add Auto Complete and Suggestion feature in your website, There are many ways to add auto complete or suggestion feature in your website using JavaScript, Basically There two ways to add auto complete and suggestion feature in your website, The First one is using JavaScript that is above mentioned and another type is using Frameworks that is jQuery, But I am gonna tell you this using JavaScript very simple, very small & very easy way, That you can understand easily.
If you don't know advance JavaScript don't worry about it, I you know only basics of JavaScript it's ok, Because I am gonna tell you in very simple, small and easy way using basic concept of JavaScript, So let's start learning something new.
So Let's Begin,
Using JavaScript :
JavaScript method will show result faster than Frameworks method.
<!DOCTYPE html>
<html>
<head>
<title>Auto Complete & Suggestion Feature using JavaScript</title>
</head>
<body>
<script type="text/javascript">
var tags = [
"Gwalior",
"Indore",
"Punjab",
"Haryana",
"Delhi",
"Madhya Pradesh",
"Rajasthan",
"Ujjain",
"Shivpuri",
"Bhind",
"Dholpur"
];
//options
var n = tags.length; //n= number of tags
function AutoComplete(value){
document.getElementById('datalist').innerHTML =";
/* setting tagslist empty, If you skip this step, same name will be repeated. */
l = value.length; // input query length
for( var i=0; i<n; i++){
if(((tags[i].toLowerCase()).indexOf(value.toLowerCase()))>-1){
//comparing if input string is alredy existing in tags[i] string
var node = document.createElement("option");
var val = document.createTextNode(tags[i]);
node.appendChild(val);
document.getElementById("datalist").appendChild(node);
//create and append new element in 'datalist'
}
}
}
</script>
<body>
<input type="text" list="datalist" onkeyup="AutoComplete(this.value)">
<!--onkeyup calls the AutoComplete function everytime when key is released.-->
<datalist id="datalist">
<option value="Delhi"></option>
<option value="Haryana"></option>
<option value="Punjab"></option>
<option value="Rajasthan"></option>
<option value="Indore"></option>
<option value="Gwalior"></option>
<option value="Bhind"></option>
<option value="Dholpur"></option>
<option value="Shivpuri"></option>
<option value="Ujjain"></option>
<option value="Madhya Pradesh"></option>
</datalist>
<!--This tagslist will be edited through JavaScript-->
</body>
</html>
<html>
<head>
<title>Auto Complete & Suggestion Feature using JavaScript</title>
</head>
<body>
<script type="text/javascript">
var tags = [
"Gwalior",
"Indore",
"Punjab",
"Haryana",
"Delhi",
"Madhya Pradesh",
"Rajasthan",
"Ujjain",
"Shivpuri",
"Bhind",
"Dholpur"
];
//options
var n = tags.length; //n= number of tags
function AutoComplete(value){
document.getElementById('datalist').innerHTML =";
/* setting tagslist empty, If you skip this step, same name will be repeated. */
l = value.length; // input query length
for( var i=0; i<n; i++){
if(((tags[i].toLowerCase()).indexOf(value.toLowerCase()))>-1){
//comparing if input string is alredy existing in tags[i] string
var node = document.createElement("option");
var val = document.createTextNode(tags[i]);
node.appendChild(val);
document.getElementById("datalist").appendChild(node);
//create and append new element in 'datalist'
}
}
}
</script>
<body>
<input type="text" list="datalist" onkeyup="AutoComplete(this.value)">
<!--onkeyup calls the AutoComplete function everytime when key is released.-->
<datalist id="datalist">
<option value="Delhi"></option>
<option value="Haryana"></option>
<option value="Punjab"></option>
<option value="Rajasthan"></option>
<option value="Indore"></option>
<option value="Gwalior"></option>
<option value="Bhind"></option>
<option value="Dholpur"></option>
<option value="Shivpuri"></option>
<option value="Ujjain"></option>
<option value="Madhya Pradesh"></option>
</datalist>
<!--This tagslist will be edited through JavaScript-->
</body>
</html>
Output :
Easy to learn and thanks @Aman
ReplyDelete