What is jquery Autocomplete?

|
| By Webner

Jquery Autocomplete

Autocomplete is a function in javascript jqeury ui that suggests or finds and selects from a predefined list of values. Any type of input box i.e. input or textarea can be converted into an autocomplete. Basically what it does is whenever a value is entered in the textbox, autocomplete plugin searches the entries or values that match the search value and displays the list of suggested values to choose from.

Autocomplete can be used to choose previously selected values, such as entering tags for articles or entering email addresses from an address book. It can also be used to populate associated information, such as entering a city name and getting the zip code.

For example :-

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>jQuery UI Autocomplete - Default functionality</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 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>
 $( function() {
   var availableTags = [
     "ActionScript",
     "AppleScript",
     "Asp",
     "BASIC",
     "C",
     "C++",
     "Clojure",
     "COBOL",
     "ColdFusion",
     "Erlang",
     "Fortran",
     "Groovy",
     "Haskell",
     "Java",
     "JavaScript",
     "Lisp",
     "Perl",
     "PHP",
     "Python",
     "Ruby",
     "Scala",
     "Scheme"
   ];
   $( "#tags" ).autocomplete({
     source: availableTags
   });
 } );
 </script>
</head>
<body>
<div class="ui-widget">
 <label for="tags">Tags: </label>
 <input id="tags">
</div>
</body>
</html>

In this example when a user enters a value inside input box, it displays the list to choose from. The list is an array predefined (available tags is an example of that array).

There are some functions available that that we can use to customize the autocomplete search box.

for example :-

=> change()
Triggered when the field is blurred, if the value has changed.
$( "#tags" ).autocomplete({
     source: availableTags,
     Change: function(){
     	},
   });

=> select()
Triggered when an item is selected from the menu.

$( "#tags" ).autocomplete({
     source: availableTags,
     Change: function(){
     	},
select:function(event,ui){
}
   });

2 comments

Leave a Reply

Your email address will not be published. Required fields are marked *