Before reading this article, I highly recommend you read my previous parts:
An Autocomplete widget enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. Autocomplete provide a list of suggestions for the beginning of the word as text is typed into the textbox. Then the user can select any item from the list, which will be displayed in the input field. The jQueryUI provides the autocomplete method to create a list of suggestions below the input field . The jQueryUI autocomplete adds new CSS classes to the elements concerned to give them the appropriate style.
Syntax:
$(selector, context).autocomplete (options)
Or
$(selector, context).autocomplete ("action", params)
Example 1
- <!DOCTYPEhtml>
- <headrunat="server">
- <title></title>
- <linkhref="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css" rel="stylesheet">
- <scriptsrc="http://code.jquery.com/jquery-1.10.2.js">
- </script>
- <scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js">
- </script>
- <script>
- $(document).ready(function ()
- {
- var States = ["Andra Pradesh", "Arunachal Pradesh", "Bihar", "Chhattisgarh", "Goa", "Haryana", "Jammu and Kashmir", "Kerala", "Mizoram", "Rajasthan", "Sikkim", "Uttaranchal", "West Bengal"];
- $("#automplete-1").autocomplete(
- {
- source: States,
- autoFocus: true
- });
- });
- </script>
- <style>
- #automplete-1 {
- margin-top: 20px;
- }
-
- #div1 {
- background-color: coral;
- color: ButtonHighlight;
- font-size: 30px;
- height: 450px;
- width: 1000px;
- text-align: center;
- margin-left: 150px
- }
- </style>
- </head>
-
- <body>
- <divid="div1"> <span>************Auto-Complete*************</span>
- <divclass="ui-widget">
- <inputtype="text" id="automplete-1" />
- </div>
- </div>
- </body>
-
- </html>
Output In the above example we created a list of state names and used this list as source for autocomplete. When we typed the “R” it shows the suggested value.
Keyboard Interaction
When the menu is open, the following key commands are available.
Command | Description |
UP | Move focus to the previous item. |
DOWN | Move focus to the next item. |
ESCAPE | Close the menu. |
ENTER | Select the currently focused item and close the menu. |
PAGE UP/PAGE DOWN | Scroll through a page of items |
TAB | Select the currently focused item, close the menu and move focus to next item. |
Options
Option | Description | Example |
appendTo | Append an element to the menu. By default its value is null. | $("#automplete-1").autocomplete({ appendTo: "#div" }); |
autofocus | If set to true the first item will automatically be focused when the menu is shown. | $("#automplete-1").autocomplete({ autoFocus: true }); |
delay | This option is an Integer representingdelay in milliseconds between when a keystroke occurs and when a search is performed. Default value is 300. | $("#automplete-1").autocomplete({ delay: 400 }); |
disabled | If set to true , disable the autocomplete . By default value is false. | $("#automplete-1").autocomplete({ disabled: true }); |
minLength | The minimum number of characters that a user must type before a search is performed. Default value is 1. | $("#automplete-1").autocomplete({ minLength: 3 }); |
position | Identifies the position of the suggestions menu in relation to the associated input element. By default its value is { my: "left top", at: "left bottom", collision: "none" }. | $("#automplete-1").autocomplete({ source: States, position: { my: "right top", at: "left bottom" } }); |
source | Defines the data to use, must be specified. Source types may be Array, String, Function. By default its value is none. | $("#automplete-1").autocomplete({ source: States, }); |
Methods
Method | Description | Example |
close | Closes the Autocomplete menu. | $("#automplete-1").autocomplete("close"); |
destroy | Removes the autocomplete functionality completely. This will return the element back to its pre-init state. | $("#automplete-1").autocomplete("destroy"); |
disable | Disables the autocomplete. | $("#automplete-1").autocomplete("disable"); |
enable | Enables the autocomplete | $("#automplete-1").autocomplete("enable"); |
instance | Retrieves the autocomplete’s instance object. Return undefined if element doesn’t exist | $("#automplete-1").autocomplete("instance"); |
option(option_name) | Gets the value currently associated with the specifiedoptionname. | varobj=$("#automplete-1").autocomplete("option", "delay"); |
option(option_name,value) | Gets the value for option. | $("#automplete-1").autocomplete("option", "delay",400); |
option | Gets an object containing key/value pairs representing the current autocomplete options. | varobj=$("#automplete-1").autocomplete("option"); |
search | Event invokes the data source if the event is not canceled. This action searches for correspondence between the string value and the data source. | $("#automplete-1").autocomplete("search", "Haryana"); |
widget | Returnsan object containing the menu element. | $("#automplete-1").autocomplete("widget"); |
Events
Event | Description | Example |
change(event, ui) | Triggered if the value has changed.this event will always come after the close event is triggered. | $("#automplete-1").autocomplete({ change: function (event, ui) { } }); |
close(event, ui) | Triggered when the menu is closed. | $("#automplete-1").autocomplete({ close: function (event, ui) { } }); |
create(event, ui) | Triggered when autocomplete is created. | $("#automplete-1").autocomplete({ create: function (event, ui) { } }); |
focus(event, ui) | Triggered when focus is moved to an item. | $("#automplete-1").autocomplete({ focus: function (event, ui) { } }); |
open(event, ui) | Triggered when the suggestion menu is opened. | $("#automplete-1").autocomplete({ open: function (event, ui) { } }); |
response(event, ui) | Triggered after a search completes, before the menu is shown. | $("#automplete-1").autocomplete({ response: function (event, ui) { } }); |
search(event, ui) | Triggered before a search is performedafter any delay and minLength criteria matched | $("#automplete-1").autocomplete({ search: function (event, ui) { } }); |
select(event, ui) | Triggered when an item is selected from the menu. | $("#automplete-1").autocomplete({ select: function (event, ui) { } }); |
Extension Points
The autocomplete widget is built with the widget factory and can be extended. While extending widgets we have the ability to override or add to the behavior of existing methods. The following extension points provide the ability to extend any existing method.
Extension | Description | Example |
_renderItem(ul, item) | This method controls the creation of each option in the widget's menu. The method must create a new <li>element, append it to the menu, and return it. The <ul> element that the newly created <li> element must be appended to. Item parameter contain label and value. Label contain the string to display for the item. The value to insert into the input when the item is selected. | _renderItem: function( ul, item ) { return $( "<li>" ) .attr( "data-value", item.value ) .append( item.label ) .appendTo( ul ); } |
_renderMenu(ul,items) | Method that controls building the widget's menu. This method is passed an empty <ul> and an array of items that match the user typed term. | _renderMenu: function( ul, items ) { var that = this; $.each( items, function( index, item ) { that._renderItemData( ul, item ); }); $( ul ).find( "li:even" ).addClass( "even" ); } |
_resizeMenu() | This extension is responsible for sizing the menu before it is displayed. The menu element is available at this.menu.element. | _resizeMenu: function() { this.menu.element.outerWidth( 600 ); } |
Now we have some examples.
Example 1
- <!DOCTYPE html>
- <head runat="server">
- <title></title>
- <link href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css" rel="stylesheet">
- <script src="http://code.jquery.com/jquery-1.10.2.js">
- </script>
- <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">
- </script>
- <script>
- $(document).ready(function ()
- {
- var States = ["Andra Pradesh", "Arunachal Pradesh", "Bihar", "Chhattisgarh", "Goa", "Haryana", "Jammu and Kashmir", "Kerala", "Mizoram", "Rajasthan", "Sikkim", "Uttaranchal", "West Bengal"];
- $("#automplete-1").autocomplete(
- {
- source: States,
- autoFocus: true,
- minLength: 2,
- delay: 400,
- position:
- {
- my: "right top",
- at: "left bottom",
- collision: "none"
- }
- });
- });
- </script>
- <style>
- #automplete-1 {
- margin-top: 20px;
- }
-
- #div1 {
- background-color: coral;
- color: ButtonHighlight;
- font-size: 30px;
- height: 450px;
- width: 1000px;
- text-align: center;
- margin-left: 150px
- }
- </style>
- </head>
-
- <body>
- <div id="div1"> <span>************Auto-Complete*************</span>
- <div class="ui-widget">
- <input type="text" id="automplete-1" />
- </div>
- </div>
- </body>
-
- </html>
Output In the above example we set the autoFoucs property as “true," so the first item will automatically be focused when the menu is shown. We assign the value of minLength property to “2” so search will start with two characters. We assign value of delay equal to 400, so the suggestion list will take some time in display. We define the position of the suggestions menu in left side.
Example 2 - <!DOCTYPE html>
- <head runat="server">
- <title></title>
- <link href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css" rel="stylesheet">
- <script src="http://code.jquery.com/jquery-1.10.2.js">
- </script>
- <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">
- </script>
- <script>
- $(document).ready(function ()
- {
- var States = [
- {
- label: "AndraPradesh",
- value: "ANP"
- },
- {
- label: "Arunachal Pradesh",
- value: "ARP"
- },
- {
- label: "Bihar",
- value: "BIH"
- },
- {
- label: "Chhattisgarh",
- value: "CHT"
- },
- {
- label: "Goa",
- value: "GOA"
- },
- {
- label: "Haryana",
- value: "HAR"
- },
- {
- label: "Jammu and Kashmir",
- value: "JAK"
- },
- {
- label: "Kerala",
- value: "KRL"
- },
- {
- label: "Mizoram",
- value: "MIZ"
- },
- {
- label: "Rajasthan",
- value: "RAJ"
- },
- {
- label: "Sikkim",
- value: "SKM"
- },
- {
- label: "Uttaranchal",
- value: "UTH"
- },
- {
- label: "West Bengal",
- value: "WGL"
- }, ];
- $("#automplete-1").autocomplete(
- {
- source: States,
- autoFocus: true,
- minLength: 2,
- delay: 400,
- position:
- {
- my: "right top",
- at: "right bottom",
- collision: "none"
- }
- });
- });
- </script>
- <style>
- #automplete-1 {
- margin-top: 20px;
- }
-
- #div1 {
- background-color: coral;
- color: ButtonHighlight;
- font-size: 30px;
- height: 450px;
- width: 1000px;
- text-align: center;
- margin-left: 150px
- }
- </style>
- </head>
-
- <body>
- <divid="div1"> <span>************Auto-Complete*************</span>
- <divclass="ui-widget">
- <inputtype="text" id="automplete-1" />
- </div>
- </div>
- </body>
-
- </html>
Output In this example we use a list of label and value as a source. Label will display in the suggestion menu and value will assign into the textbox with respect to their label.
Example 3 - <!DOCTYPE html>
- <head runat="server">
- <title></title>
- <link href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css" rel="stylesheet">
- <script src="http://code.jquery.com/jquery-1.10.2.js">
- </script>
- <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">
- </script>
- <script>
- $(document).ready(function ()
- {
- var States = [
- {
- label: "Andra Pradesh",
- value: "ANP",
- desc: "Capital is Hyderabad"
- },
- {
- label: "Arunachal Pradesh",
- value: "ARP",
- desc: "Capital is Itangar"
- },
- {
- label: "Bihar",
- value: "BIH",
- desc: "Capital is Patna"
- },
- {
- label: "Chhattisgarh",
- value: "CHT",
- desc: "Capital is Raipur"
- },
- {
- label: "Goa",
- value: "GOA",
- desc: "Capital is Panaji"
- },
- {
- label: "Haryana",
- value: "HAR",
- desc: "Chandigarh"
- },
- {
- label: "Jammu and Kashmir",
- value: "JAK",
- desc: "Srinagar and Jammu"
- },
- {
- label: "Kerala",
- value: "KRL",
- desc: "Capital is Thiruvananthapuram"
- },
- {
- label: "Mizoram",
- value: "MIZ",
- desc: "Capital is Aizawi"
- },
- {
- label: "Rajasthan",
- value: "RAJ",
- desc: "Capital is Jaipur"
- },
- {
- label: "Sikkim",
- value: "SKM",
- desc: "Capital is Gangtok"
- },
- {
- label: "Uttaranchal",
- value: "UTH",
- desc: "Capital is Dehradun"
- },
- {
- label: "West Bengal",
- value: "WGL",
- desc: "Capital is Kolkata"
- }, ];
- $("#automplete-1").autocomplete(
- {
- source: States,
- autoFocus: true,
- minLength: 2,
- delay: 400,
- position:
- {
- my: "right top",
- at: "right bottom",
- collision: "none"
- },
- focus: function (event, ui)
- {
- $("#automplete-1").val(ui.item.value);
- },
- select: function (event, ui)
- {
- $("#automplete-1").val(ui.item.value);
- $("#auto_id").val(ui.item.label);
- returnfalse;
- }
- }).data("ui-autocomplete")._renderItem = function (ul, item)
- {
- return $("<li>").append("<a>" + item.label + "<br>" + "<i style=\"color:#1ACE26\">" + item.desc + "</i>" + "</a>").appendTo(ul);
- };
- });
- </script>
- <style>
- #automplete-1 {
- margin-top: 20px;
- }
-
- #div1 {
- background-color: coral;
- color: ButtonHighlight;
- font-size: 30px;
- height: 450px;
- width: 1000px;
- text-align: center;
- margin-left: 150px
- }
- </style>
- </head>
-
- <body>
- <divid="div1"> <span>************Auto-Complete*************</span>
- <divclass="ui-widget">
- <inputtype="text" id="automplete-1" />
- <inputtype="hidden" id="auto_id">
- </div>
- </div>
- </body>
-
- </html>
Output: In this example we use the focus and select event listener. An important part of this example is the extension point. We used the “
_renderItem” extension point. We know that _”
renderItem”method controls the creation of each option in the widget menu. This method creates a new <li> element, appends it to the menu and return it. We created
<li> element that contains the state name and another piece of information about the capital of that state and append this
<li> item to menu.
Thanks for reading the article.