If you want to know how to create the autocomplete widget as well as understand its commonly used options, methods, and events. You have came to the right place

This widget gets the filtered list of items as the user types in the text field and displays them in a drop-down.  The following is the syntax for creating the autocomplete widget:
$(selector).autocomplete() 

$(selector).autocomplete(options)
An <input> element can be specified as an autocomplete widget. When a user starts typing data in the <input> field, a drop-down list of items is displayed based on the entered data. Items in the drop-down are filtered from the data source, which can be a JavaScript array, URL, or function. A drop-down is basically a menu widget that’s created at runtime.

 FOUR STEPS TO CREATE JQUERY AUTOCOMPLETE WIDGET :

  1.  Add jquery-ui css cdn to the html document
  2.  Add  to the jquery cdn to the html document
  3.  Add  to the jquery ui js cdn to the html document  
  4.  Make file named "date.html"  with given code.
 
 

STEP ONE: Add jquery-ui css cdn to the html document
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css"/>   

STEP TWO: Add  to the jquery cdn to the html document
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>   

STEP THREE: Add  to the jquery ui js cdn to the html document  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>


STEP FOUR: Make file named "autocomplete.html"  with given code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<script>      
var departmentsArray = [ "Customer Support", "Implementation", "Infrastructure",                                                   "Marketing",  "Production Support", "Sales", "Technology"];
$(function() {

$( "#department" ).autocomplete({
source: departmentsArray      
});       
});      
</script> 
</head> 
<body>      
<div class="ui-widget">       
<label for="department">Department Name: </label>       
<input id="department">     
 </div> 
</body> 
</html>
EXAMPLE :


How It Works
Within the document ready function of this example, the autocomplete() method sets the input element—with the ID set to department—as an autocomplete widget. The only option used in this example is source, which is set as a JavaScript array—departmentsArray. As the user types data in the input textbox, matched items from the array are selected and displayed in the drop-down. The user can either keep on entering more data to refine the drop-down items or select the value from the drop-down list by using the up and down arrow keys and pressing Enter or by clicking the item with the mouse left key. The CSS class ui-widget is used to set a consistent font family and size to all child nodes.

The other commonly used options for the autocomplete widget are: 

minLength—Minimum number of characters that the user needs to enter before the search is performed. 
delay—Delay in milliseconds after a character is entered and before the search is performed.

The commonly used events for the autocomplete widget are: 
select—Triggered when an item is selected from the drop-down. 
change—Triggered when the value of the widget changes and it loses its focus.


The CSS classes specific to the autocomplete widget are: 

ui-autocomplete—Used for the drop-down menu. 
ui-autocomplete-input—Used for the input textbox, which is set as the autocomplete widget.

This CSS classes can be modified in your custom code. Since these classes are already associated with the widget, there is no need to specify them for the specific HTML element. For example, by specifying following in your code, the background color of the drop-down menu changes to lightyellow.

<style>  .ui-autocomplete { background: lightyellow;} </style>

No comments:

Post a Comment