There are many ways to make an autocomplete feature in javascript. We will be targetting two of them. One using Pure Javascript and other by using Framework like Jquery.
Prerequisites:
1) Using Pure Javascript (No frameworks):
This method shows the results faster than the method of using frameworks.
Important functions:
getElementsByTagName: Used to get elements by their class or id from html.
createElement(“type”): create element creates an element of the passed type
appendChild(node): Appends the passed node at the end of attached parent.
Code #1:
<!DOCTYPE html> < html > < head > < title >Auto complete using Pure Javascript</ title > </ head > < body > < script type = "text/javascript" > var tags = [ "Delhi", "Ahemdabad", "Punjab", "Uttar Pradesh", "Himachal Pradesh", "Karnatka", "Kerela", "Maharashtra", "Gujrat", "Rajasthan", "Bihar", "Tamil Nadu", "Haryana" ]; /*list of available options*/ var n= tags.length; //length of datalist tags function ac(value) { document.getElementById('datalist').innerHTML = ''; //setting datalist empty at the start of function //if we 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 existing in tags[i] string var node = document.createElement("option"); var val = document.createTextNode(tags[i]); node.appendChild(val); document.getElementById("datalist").appendChild(node); //creating and appending new elements in data list } } } </ script > < input type = "text" list = "datalist" onkeyup = "ac(this.value)" > <!-- On keyup calls the function everytime a key is released --> < 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 = "Karnatka" ></ option > < option value = "Kerela" ></ 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 > <!-- This data list will be edited through javascript --> </ datalist > </ body > </ html > |
Output:
At first output will be like below-
And when B is put inside of the box then output becomes like below-
2) USING JQUERY
jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.
JQuery has an inbuilt autocomplete function which takes id and a list of available tags.
Code #2:
<!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 > $( function() { var tags = [ "Delhi", "Ahemdabad", "Punjab", "Uttar Pradesh", "Himachal Pradesh", "Karnatka", "Kerela", "Maharashtra", "Gujrat", "Rajasthan", "Bihar", "Tamil Nadu", "Haryana" /* Making a list of available tags */ ]; $( "#tags" ).autocomplete({ source: tags /* #tthe ags is the id of the input element source: tags is the list of available tags*/ }); } ); </ script > </ head > < body > < div class = "ui-widget" > < H3 >Enter an alphabet to get suggestion:</ H3 > < input id = "tags" > </ div > </ body > </ html > |
Type a letter to see recommendations and click to complete the text automatically.
Output:
At first, output will be like below-
And when D is put inside of the box then output becomes like below-
Reference: http://api.jqueryui.com/autocomplete/
leave a comment
0 Comments