How to use autocomplete search in jQuery ?
In this article, we are going to see how to use search auto-complete in JQuery. For this, we are going to use the jQuery inbuilt function called autocomplete. We will do that in two different stages.
- Create a basic HTML file and add an input bar to it.
- Implement the autocomplete functionality.
HTML Code: Here we will create the structure to take the input from the user and attach the jQuery CDN link in the head section.
Add jQuery scripts into your HTML file:
<script src=”https://code.jquery.com/jquery-1.12.4.js”></script>
<script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
index.html
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >Jquery Autocomplete</ title > < script src = "https://code.jquery.com/jquery-1.12.4.js" > </ script > < script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js" > </ script > </ head > < body > < input type = "text" id = "auto" placeholder = "enter something" /> </ body > </ html > |
jQuery Code: For this, we are going to use the jQuery inbuilt function called autocomplete. This function takes a list of words as a source. And when we type any character it will search from the given list and shows the output if any available.
Syntax:
$("TagId").autocomplete({ source : itemList // List of Words. })
Javascript
$(document).ready( function () { // array of items. var items = [ "C++" , "Java" , "Python" , "C#" , "DSA" , "STL" , "Self Placed" , "Android" , "Kotlin" , "w3wiki" , "GFG" , ]; // jQuery inbuild function $( "#auto" ).autocomplete({ source: items // list of items. }); }) |
Complete Code:
index.html
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >Jquery Autocomplete</ title > < script src = "https://code.jquery.com/jquery-1.12.4.js" > </ script > < script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js" > </ script > < script > $(document).ready(function() { // List of Items var items = [ "C++", "Java", "Python", "C#", "DSA", "STL", "Self Placed", "Android", "Kotlin", "w3wiki", "GFG", ]; // jQuery inbuild function. $("#auto").autocomplete({ // This function takes words list as a source. source: items }); }) </ script > </ head > < body > < input type = "text" id = "auto" placeholder = "enter something" /> </ body > </ html > |
Output: