JQuery

JQuery UI - Day 7 (AutoComplete)

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

  1. <!DOCTYPEhtml>  
  2. <headrunat="server">  
  3.     <title></title>  
  4.     <linkhref="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css" rel="stylesheet">  
  5.         <scriptsrc="http://code.jquery.com/jquery-1.10.2.js">  
  6.             </script>  
  7.             <scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  8.                 </script>  
  9.                 <script>  
  10.                 $(document).ready(function ()  
  11.                 {  
  12.                     var States = ["Andra Pradesh", "Arunachal Pradesh", "Bihar", "Chhattisgarh", "Goa", "Haryana", "Jammu and Kashmir", "Kerala", "Mizoram", "Rajasthan", "Sikkim", "Uttaranchal", "West Bengal"];  
  13.                     $("#automplete-1").autocomplete(  
  14.                     {  
  15.                         source: States,  
  16.                         autoFocus: true  
  17.                     });  
  18.                 });  
  19.                 </script>  
  20.                 <style>  
  21.                 #automplete-1 {  
  22.                     margin-top: 20px;  
  23.                 }  
  24.                  
  25.                 #div1 {  
  26.                     background-color: coral;  
  27.                     color: ButtonHighlight;  
  28.                     font-size: 30px;  
  29.                     height: 450px;  
  30.                     width: 1000px;  
  31.                     text-align: center;  
  32.                     margin-left: 150px  
  33.                 }  
  34.                 </style>  
  35.                 </head>  
  36.   
  37.                 <body>  
  38.                     <divid="div1"> <span>************Auto-Complete*************</span>  
  39.                         <divclass="ui-widget">  
  40.                             <inputtype="text" id="automplete-1" />   
  41.                         </div>  
  42.                     </div>  
  43.                 </body>  
  44.   
  45.             </html>  
Output

Autocomplete

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

  1. <!DOCTYPE html>  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <link href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css" rel="stylesheet">  
  5.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  6.             </script>  
  7.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  8.                 </script>  
  9.                 <script>  
  10.                 $(document).ready(function ()  
  11.                 {  
  12.                     var States = ["Andra Pradesh", "Arunachal Pradesh", "Bihar", "Chhattisgarh", "Goa", "Haryana", "Jammu and Kashmir", "Kerala", "Mizoram", "Rajasthan", "Sikkim", "Uttaranchal", "West Bengal"];  
  13.                     $("#automplete-1").autocomplete(  
  14.                     {  
  15.                         source: States,  
  16.                         autoFocus: true,  
  17.                         minLength: 2,  
  18.                         delay: 400,  
  19.                         position:  
  20.                         {  
  21.                             my: "right top",  
  22.                             at: "left bottom",  
  23.                             collision: "none"  
  24.                         }  
  25.                     });  
  26.                 });  
  27.                 </script>  
  28.                 <style>  
  29.                 #automplete-1 {  
  30.                     margin-top: 20px;  
  31.                 }  
  32.                  
  33.                 #div1 {  
  34.                     background-color: coral;  
  35.                     color: ButtonHighlight;  
  36.                     font-size: 30px;  
  37.                     height: 450px;  
  38.                     width: 1000px;  
  39.                     text-align: center;  
  40.                     margin-left: 150px  
  41.                 }  
  42.                 </style>  
  43.                 </head>  
  44.   
  45.                 <body>  
  46.                     <div id="div1"> <span>************Auto-Complete*************</span>  
  47.                         <div class="ui-widget">  
  48.                             <input type="text" id="automplete-1" />   
  49.                         </div>  
  50.                     </div>  
  51.                 </body>  
  52.   
  53.             </html>  
Output

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
  1. <!DOCTYPE html>  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <link href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css" rel="stylesheet">  
  5.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  6.             </script>  
  7.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  8.                 </script>  
  9.                 <script>  
  10.                 $(document).ready(function ()  
  11.                 {  
  12.                     var States = [  
  13.                     {  
  14.                         label: "AndraPradesh",  
  15.                         value: "ANP"  
  16.                     },  
  17.                     {  
  18.                         label: "Arunachal Pradesh",  
  19.                         value: "ARP"  
  20.                     },  
  21.                     {  
  22.                         label: "Bihar",  
  23.                         value: "BIH"  
  24.                     },  
  25.                     {  
  26.                         label: "Chhattisgarh",  
  27.                         value: "CHT"  
  28.                     },  
  29.                     {  
  30.                         label: "Goa",  
  31.                         value: "GOA"  
  32.                     },  
  33.                     {  
  34.                         label: "Haryana",  
  35.                         value: "HAR"  
  36.                     },  
  37.                     {  
  38.                         label: "Jammu and Kashmir",  
  39.                         value: "JAK"  
  40.                     },  
  41.                     {  
  42.                         label: "Kerala",  
  43.                         value: "KRL"  
  44.                     },  
  45.                     {  
  46.                         label: "Mizoram",  
  47.                         value: "MIZ"  
  48.                     },  
  49.                     {  
  50.                         label: "Rajasthan",  
  51.                         value: "RAJ"  
  52.                     },  
  53.                     {  
  54.                         label: "Sikkim",  
  55.                         value: "SKM"  
  56.                     },  
  57.                     {  
  58.                         label: "Uttaranchal",  
  59.                         value: "UTH"  
  60.                     },  
  61.                     {  
  62.                         label: "West Bengal",  
  63.                         value: "WGL"  
  64.                     }, ];  
  65.                     $("#automplete-1").autocomplete(  
  66.                     {  
  67.                         source: States,  
  68.                         autoFocus: true,  
  69.                         minLength: 2,  
  70.                         delay: 400,  
  71.                         position:  
  72.                         {  
  73.                             my: "right top",  
  74.                             at: "right bottom",  
  75.                             collision: "none"  
  76.                         }  
  77.                     });  
  78.                 });  
  79.                 </script>  
  80.                 <style>  
  81.                 #automplete-1 {  
  82.                     margin-top: 20px;  
  83.                 }  
  84.                  
  85.                 #div1 {  
  86.                     background-color: coral;  
  87.                     color: ButtonHighlight;  
  88.                     font-size: 30px;  
  89.                     height: 450px;  
  90.                     width: 1000px;  
  91.                     text-align: center;  
  92.                     margin-left: 150px  
  93.                 }  
  94.                 </style>  
  95.                 </head>  
  96.   
  97.                 <body>  
  98.                     <divid="div1"> <span>************Auto-Complete*************</span>  
  99.                         <divclass="ui-widget">  
  100.                             <inputtype="text" id="automplete-1" />   
  101.                          </div>  
  102.                     </div>  
  103.                 </body>  
  104.   
  105.             </html>  
Output

run

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
  1. <!DOCTYPE html>  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <link href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css" rel="stylesheet">  
  5.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  6.             </script>  
  7.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  8.                 </script>  
  9.                 <script>  
  10.                 $(document).ready(function ()  
  11.                 {  
  12.                     var States = [  
  13.                     {  
  14.                         label: "Andra Pradesh",  
  15.                         value: "ANP",  
  16.                         desc: "Capital is Hyderabad"  
  17.                     },  
  18.                     {  
  19.                         label: "Arunachal Pradesh",  
  20.                         value: "ARP",  
  21.                         desc: "Capital is Itangar"  
  22.                     },  
  23.                     {  
  24.                         label: "Bihar",  
  25.                         value: "BIH",  
  26.                         desc: "Capital is Patna"  
  27.                     },  
  28.                     {  
  29.                         label: "Chhattisgarh",  
  30.                         value: "CHT",  
  31.                         desc: "Capital is Raipur"  
  32.                     },  
  33.                     {  
  34.                         label: "Goa",  
  35.                         value: "GOA",  
  36.                         desc: "Capital is Panaji"  
  37.                     },  
  38.                     {  
  39.                         label: "Haryana",  
  40.                         value: "HAR",  
  41.                         desc: "Chandigarh"  
  42.                     },  
  43.                     {  
  44.                         label: "Jammu and Kashmir",  
  45.                         value: "JAK",  
  46.                         desc: "Srinagar and Jammu"  
  47.                     },  
  48.                     {  
  49.                         label: "Kerala",  
  50.                         value: "KRL",  
  51.                         desc: "Capital is Thiruvananthapuram"  
  52.                     },  
  53.                     {  
  54.                         label: "Mizoram",  
  55.                         value: "MIZ",  
  56.                         desc: "Capital is Aizawi"  
  57.                     },  
  58.                     {  
  59.                         label: "Rajasthan",  
  60.                         value: "RAJ",  
  61.                         desc: "Capital is Jaipur"  
  62.                     },  
  63.                     {  
  64.                         label: "Sikkim",  
  65.                         value: "SKM",  
  66.                         desc: "Capital is Gangtok"  
  67.                     },  
  68.                     {  
  69.                         label: "Uttaranchal",  
  70.                         value: "UTH",  
  71.                         desc: "Capital is Dehradun"  
  72.                     },  
  73.                     {  
  74.                         label: "West Bengal",  
  75.                         value: "WGL",  
  76.                         desc: "Capital is Kolkata"  
  77.                     }, ];  
  78.                     $("#automplete-1").autocomplete(  
  79.                     {  
  80.                         source: States,  
  81.                         autoFocus: true,  
  82.                         minLength: 2,  
  83.                         delay: 400,  
  84.                         position:  
  85.                         {  
  86.                             my: "right top",  
  87.                             at: "right bottom",  
  88.                             collision: "none"  
  89.                         },  
  90.                         focus: function (event, ui)  
  91.                         {  
  92.                             $("#automplete-1").val(ui.item.value);  
  93.                         },  
  94.                         select: function (event, ui)  
  95.                         {  
  96.                             $("#automplete-1").val(ui.item.value);  
  97.                             $("#auto_id").val(ui.item.label);  
  98.                             returnfalse;  
  99.                         }  
  100.                     }).data("ui-autocomplete")._renderItem = function (ul, item)  
  101.                     {  
  102.                         return $("<li>").append("<a>" + item.label + "<br>" + "<i style=\"color:#1ACE26\">" + item.desc + "</i>" + "</a>").appendTo(ul);  
  103.                     };  
  104.                 });  
  105.                 </script>  
  106.                 <style>  
  107.                 #automplete-1 {  
  108.                     margin-top: 20px;  
  109.                 }  
  110.                  
  111.                 #div1 {  
  112.                     background-color: coral;  
  113.                     color: ButtonHighlight;  
  114.                     font-size: 30px;  
  115.                     height: 450px;  
  116.                     width: 1000px;  
  117.                     text-align: center;  
  118.                     margin-left: 150px  
  119.                 }  
  120.                 </style>  
  121.                 </head>  
  122.   
  123.                 <body>  
  124.                     <divid="div1"> <span>************Auto-Complete*************</span>  
  125.                         <divclass="ui-widget">  
  126.                             <inputtype="text" id="automplete-1" />  
  127.                             <inputtype="hidden" id="auto_id">  
  128.                         </div>  
  129.                     </div>  
  130.                 </body>  
  131.   
  132.             </html>  
Output:

ARP

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.

 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs