JQuery UI - Day 7 (AutoComplete)

Article

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

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

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

<!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:

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

Printing in C# Made Easy

Read by 10.8k people

Download Now!

Learn

View all