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