ejAutocomplete

29 Jan 201924 minutes to read

The AutoComplete control is a textbox control that provides a list of suggestions based on the user query.When the users enters the text in the text box, the control performs a search operation and provides a list of results in the suggestion pop up. There are several filter types available to perform the search.

Syntax

JAVASCRIPT

$(element).ejAutocomplete()

Example

HTML

<input type="text" id="autocomplete" /> 
	<script> 
	// Create AutoComplete 
	$('#autocomplete').ejAutocomplete({ 
		dataSource: window.carList,value:"Austin-Healey" 
	}); 
	</script>

Requires

• module:jQuery

• module:ej.core.js

• module:ej.data.js

• module:ej.autocomplete.js

• module:ej.scroller.js

Members

addNewText string

Customize “Add New” text (label) to be added in the autocomplete popup list for the entered text when there are no suggestions for it.

NOTE

This property is applicable only when the “MultiSelectMode” property is set as “VisualMode” and “AllowAddNew” property is set as “true”.

Default Value:

• “Add New”

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		dataSource: window.carList, 
		allowAddNew: true, 
		addNewText: "Add New Car", 
		multiSelectMode:"visualmode" 
	});

allowAddNew boolean

Allows new values to be added to the autocomplete input other than the values in the suggestion list. Normally, when there are no suggestions it will display “No suggestions” label in the popup.

NOTE

This property will work only when the “MultiSelectMode” property is set as “VisualMode”

Default Value:

• false

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		allowAddNew: true, 
		multiSelectMode: "visualmode" 
	});

allowSorting boolean

Enables or disables the sorting of suggestion list item. The default sort order is ascending order. You customize sort order.

See Also

 SortOrder

Default Value:

• true

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		allowSorting: false 
	});

animateType enum

Enables or disables selecting the animation style for the popup list. Animation types can be selected through either of the following options,

Name	Description
none	Supports to animation type with none type only.
slide	Supports to animation type with slide type only.
fade	Supports to animation type with fade type only.

Default Value:

• slide

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		animateType: "fade" 
	});

autoFocus boolean

To focus the items in the suggestion list when the popup is shown. By default first item will be focused.

Default Value:

• false

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		autoFocus: true 
	});

caseSensitiveSearch boolean

Enables or disables the case sensitive search.

Default Value:

• false

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		caseSensitiveSearch: true 
	});

cssClass string

The root class for the Autocomplete textbox widget which helps in customizing its theme.

Default Value:

• ””

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		cssClass: 'gradient-lime' 
	});

dataSource Object|Array

The data source contains the list of data for the suggestions list. It can be a string array or JSON array or service URL that returns JSON.

Default Value:

• null

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		dataSource: window.carList, 
		value: "Austin-Healey" 
	});

delaySuggestionTimeout number

The time delay (in milliseconds) after which the suggestion popup will be shown.

Default Value:

• 200

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({
		delaySuggestionTimeout: 500 
	});

delimiterChar string

The special character which acts as a separator for the given words for multi-mode search i.e. the text after the delimiter are considered as a separate word or query for search operation.

NOTE

1. This property is applicable only when the “MultiSelectMode” property set as “Delimiter”.
2. The delimiter string should have a single character and must be a symbol.
3. Mostly the delimiter symbol is used as (comma ,) or (semi-colon ;) or any other special character.

Default Value:

• ’,’

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({
		multiSelectMode: ej.MultiSelectMode.Delimiter, 
		delimiterChar: ';' 
	});

emptyResultText string

The text to be displayed in the popup when there are no suggestions available for the entered text.

NOTE

This property is applicable only when the showEmptyResultText property set as “true”

Default Value:

• “No suggestions”

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({
		emptyResultText: 'No Results Found' 
	});

enableAutoFill boolean

Fills the autocomplete textbox with the first matched item from the suggestion list automatically based on the entered text when enabled.

NOTE

This property works only when “filterType” property is set as “startswith”

Default Value:

• false

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({
		enableAutoFill: true 
	});

enabled boolean

Enables or disables the Autocomplete textbox widget.

Default Value:

• true

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({
		enabled: false
	});

enableDistinct boolean

Enables or disables displaying the duplicate names present in the search result.

Default Value:

• false

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		enableDistinct: true 
	});

enablePersistence boolean

Allows the current model values to be saved in local storage or browser cookies for state maintenance when it is set to true. While refreshing the page, it retains the model value from browser cookies or local storage.

NOTE

Local storage is supported only in Html5 supported browsers. If the browsers don’t have support for local storage, browser cookies will be used to maintain the state.

Default Value:

• false

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		enablePersistence: true 
	});

enableRTL boolean

Displays the Autocomplete widget’s content from right to left when enabled.

Default Value:

• false

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({
		enableRTL: true 
	});

fields Object

Mapping fields for the suggestion items of the Autocomplete textbox widget.

Default Value:

• null

fields.groupBy string

Used to group the suggestion list items.

fields.htmlAttributes Object

Defines the HTML attributes such as id, class, styles for the item.

fields.key string

Defines the specific field name which contains unique key values for the list items.

fields.text string

Defines the specific field name in the data source to load the suggestion list with data.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		fields: { 
			text: "name", 
			key: "id" 
		} 
	});

filterType string

Specifies the search filter type. There are several types of search filter available such as ‘startswith’, ‘contains’, ‘endswith’, ‘lessthan’, ‘lessthanorequal’, ‘greaterthan’, ‘greaterthanorequal’, ‘equal’, ‘notequal’.

Default Value:

• ej.filterType.StartsWith

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({
		filterType: 'contains' 
	});

height string|number

The height of the Autocomplete textbox.

Default Value:

• null

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({
		height: 30 
	});

highlightSearch boolean

The search text can be highlighted in the AutoComplete suggestion list when enabled.

Default Value:

• false

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		highlightSearch: true 
	});

itemsCount number

Number of items to be displayed in the suggestion list.

Default Value:

• 0

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		itemsCount: 2 
	});

ignoreAccent boolean

To enable or disable the diacritic characters of the Autocomplete suggestion list when filtering.

Default Value:

• false

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		ignoreAccent: true 
	});

locale string

Set the localization culture for Autocomplete Widget.

Default Value:

“en-US”

Example

JAVASCRIPT

$("#dialog").ejAutocomplete({locale: "es-ES"});

minCharacter number

Minimum number of character to be entered in the Autocomplete textbox to show the suggestion list.

Default Value:

• 1

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		minCharacter: 3 
	});

multiColumnSettings Object

An Autocomplete column collection can be defined and customized through the multiColumnSettings property.
Column’s header, field, and stringFormat can be define via multiColumnSettings properties.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
    multiColumnSettings: {
	enable: true,
    showHeader: true,
    stringFormat: "{0} ({1})",
    columns: [{
    field:"name", 
    headerText: "Name"
    },{
    field: "id" ,
    headerText:"ID"
    }]
    }
	});

multiColumnSettings.enable boolean

Allow list of data to be displayed in several columns.

Default Value:

• false

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
    multiColumnSettings: {
    enable: true,
    stringFormat: "{0} ({1})",
    columns: [{
    field:"name", 
    headerText: "Name"
    },{
    field: "id" ,
    headerText:"ID"
    }]
    }
	});

multiColumnSettings.showHeader boolean

Allow header text to be displayed in corresponding columns.

Default Value:

• true

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
    multiColumnSettings: {
    enable: true,
    showHeader: true,
    stringFormat: "{0} ({1})",
    columns: [{
    field:"name", 
    headerText: "Name"
    },{
    field: "id" ,
    headerText:"ID"
    }]
    }
	});

multiColumnSettings.stringFormat string

Displayed selected value and autocomplete search based on mentioned column value specified in that format.

NOTE

stringFormat as “{0} ({1}) ({2})” means search based on 0, 1 and 2 columns data.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
    multiColumnSettings: {
    enable: true,
    showHeader: true,
    stringFormat: "{0} ({1})",
    columns: [{
    field:"name", 
    headerText: "Name"
    },{
    field: "id" ,
    headerText:"ID"
    }]
    }
	});

multiColumnSettings.searchColumnIndices Array

This property allows user to search text for any number of fields in the suggestion list without modifying the selected text format.

NOTE

searchColumnIndices as [0,1] means search based on 0 and 1 columns data.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
    multiColumnSettings: {
    enable: true,
    showHeader: true,
    stringFormat: "{0}",
	searchColumnIndices:[0,1],
    columns: [{
    field:"name", 
    headerText: "Name"
    },{
    field: "id" ,
    headerText:"ID"
    }]
    }
	});

multiColumnSettings.columns Array

Field and Header Text collections can be defined and customized through columns field.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
    multiColumnSettings: {
    enable: true,
    showHeader: true,
    stringFormat: "{0} ({1})",
    columns: [{
    field:"name", 
    headerText: "Name"
    },{
    field: "id" ,
    headerText:"ID"
    }]
    }
	});

multiColumnSettings.columns.field string

Get or set a value that indicates to display the columns in the autocomplete mapping with column name of the dataSource.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
    multiColumnSettings: {
    enable: true,
    showHeader: true,
    stringFormat: "{0} ({1})",
    columns: [{
    field:"name", 
    headerText: "Name"
    },{
    field: "id" ,
    headerText:"ID"
    }]
    }
	});

multiColumnSettings.columns.headerText string

Get or set a value that indicates to display the title of that particular column.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
    multiColumnSettings: {
    enable: true,
    showHeader: true,
    stringFormat: "{0} ({1})",
    columns: [{
    field:"name", 
    headerText: "Name"
    },{
    field: "id" ,
    headerText:"ID"
    }]
    }
	});

multiColumnSettings.columns.cssClass string

Gets or sets a value that indicates to render the multicolumn with custom theme.

Default Value:

• ””

Example

HTML

<style type="text/css">
   .gradient-green {
       font-family: cursive;
   }
</style>
<script>
$("#autocomplete").ejAutocomplete({ 
    multiColumnSettings: {
    enable: true,
    showHeader: true,
    stringFormat: "{0} ({1})",
    columns: [{
    field:"name", 
    headerText: "Name",
    cssClass: "gradient-green"
    },{
    field: "id" ,
    headerText:"ID"
    }]
    }
	});
</script>

multiColumnSettings.columns.type enum

Specifies the search data type. There are four types of data types available such as string, ‘number’, ‘boolean’ and ‘date’.

Default Value:

• ej.Type.String

Column type	Data type
number	ej.Type.Number
string	ej.Type.String
boolean	ej.Type.Boolean
Date	ej.Type.Date

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
    multiColumnSettings: {
    enable: true,
    showHeader: true,
    stringFormat: "{0} ({1})",
    columns: [{
    field:"name", 
    headerText: "Name",
    },{
    field: "id" ,
    headerText:"ID",
    type: ej.Type.Number,
    filterType: ej.filterType.GreaterThan
    }]
    }
	});

multiColumnSettings.columns.filterType enum

Specifies the search filter type. There are several types of search filter available such as ‘startswith’, ‘contains’, ‘endswith’, ‘lessthan’, ‘lessthanorequal’, ‘greaterthan’, ‘greaterthanorequal’, ‘equal’, ‘notequal’.

Default Value:

• ej.filterType.StartsWith

Column type	Filter type
number	ej.filterType.GreaterThan ej.filterType.GreaterThanOrEqual ej.filterType.LessThan ej.filterType.LessThanOrEqual ej.filterType.Equal
string	ej.filterType.StartsWith ej.filterType.EndsWith ej.filterType.Contains ej.filterType.Equal ej.filterType.NotEqual
boolean	ej.filterType.Equal ej.filterType.NotEqual
Date	ej.filterType.GreaterThan ej.filterType.GreaterThanOrEqual ej.filterType.LessThan ej.filterType.LessThanOrEqual ej.filterType.Equal

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
    multiColumnSettings: {
    enable: true,
    showHeader: true,
    stringFormat: "{0} ({1})",
    columns: [{
    field:"name", 
    headerText: "Name",
    type: ej.Type.String,
    filterType: ej.filterType.Contains
    },{
    field: "id" ,
    headerText:"ID"
    }]
    }
	});

multiColumnSettings.columns.headerTextAlign enum

This defines the text alignment of a particular column header cell value. See headerTextAlign

Default Value:

• ej.TextAlign.Left

Add a comment to this line

Name	Description
Center	Header text is centered.
Justify	Header text is justified.
Left	Header text is aligned to the left.
Right	Header text is aligned to the right.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
    multiColumnSettings: {
    enable: true,
    showHeader: true,
    stringFormat: "{0} ({1})",
    columns: [{
    field:"name", 
    headerText: "Name",
    headerTextAlign: ej.TextAlign.Center
    },{
    field: "id" ,
    headerText:"ID"
    }]
    }
	});

multiColumnSettings.columns.textAlign enum

Gets or sets a value that indicates to align the text within the column. See textAlign

Default Value:

• ej.TextAlign.Left

Name	Description
Center	Text is centered.
Justify	Text is justified.
Left	Text is aligned to the left.
Right	Text is aligned to the right.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
    multiColumnSettings: {
    enable: true,
    showHeader: true,
    stringFormat: "{0} ({1})",
    columns: [{
    field:"name", 
    headerText: "Name",
    textAlign: ej.TextAlign.Right
    },{
    field: "id" ,
    headerText:"ID"
    }]
    }
	});

multiSelectMode enum

Enables or disables selecting multiple values from the suggestion list. Multiple values can be selected through either of the following options,

Name	Description
Delimiter	Multiple values are separated using a given special character.
VisualMode	Each values are displayed in separate box with close button.

See Also

MultiSelectMode

Default Value:

• ej.MultiSelectMode.None

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		multiSelectMode: ej.MultiSelectMode.Delimiter 
	});

popupHeight string

The height of the suggestion list.

Default Value:

• “152px”

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		popupHeight: '100px' 
	});

popupWidth string

The width of the suggestion list.

Default Value:

• “auto”

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({
		popupWidth: '152px' 
	});

query ej.Query

The query to retrieve the data from the data source.

Default Value:

• null

Example

JAVASCRIPT

var dataManger = ej.DataManager({ 
		url: "http://mvc.syncfusion.com/Services/Northwnd.svc/" 
	});
	
	var query = ej.Query().from("Suppliers").select("ContactName");
	
	$("#autocomplete").ejAutocomplete({ 
		dataSource: dataManger, 
		query: query, 
		fields: { 
			text: "ContactName" 
		}
	});

readOnly boolean

Indicates that the autocomplete textbox values can only be readable.

Default Value:

• false

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({
		readOnly: true 
	});

selectValueByKey number

Sets the value for the Autocomplete textbox based on the given input key value.

Example

JAVASCRIPT

$('#autocomplete').ejAutocomplete({
		selectValueByKey: "15", 
		fields: { 
			text: "name", 
			key: "key" 
		} 
	});

showEmptyResultText boolean

Enables or disables showing the message when there are no suggestions for the entered text.

Default Value:

• true

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		showEmptyResultText: false 
	});

showLoadingIcon boolean

Enables or disables the loading icon to intimate the searching operation. The loading icon is visible when there is a time delay to perform the search.

Default Value:

• true

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		showLoadingIcon: false 
	});

showPopupButton boolean

Enables the showPopup button in autocomplete textbox. When the showPopup button is clicked, it displays all the available data from the data source.

Default Value:

• false

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		showPopupButton: true 
	});

showRoundedCorner boolean

Enables or disables rounded corner.

Default Value:

• false

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		showRoundedCorner: true 
	});

showResetIcon boolean

Enables or disables reset icon to clear the textbox values.

Default Value:

• false

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		showResetIcon: true 
	});

sortOrder enum

Sort order specifies whether the suggestion list values has to be displayed in ascending or descending order.

Name	Description
Ascending	Items to be displayed in the suggestion list in ascending order.
Descending	Items to be displayed in the suggestion list in descending order.

See Also

 SortOrder

Default Value:

• ej.SortOrder.Ascending

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		sortOrder: ej.SortOrder.Decending 
	});

template string

The template to display the suggestion list items with customized appearance.

Default Value:

• null

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		dataSource: window.mobileList, 
		fields: { 
			text: "pName" 
		}, 
		template: "<div><div class='product-text'>${pName}</div> <span class='product-quantity'> Quantity : ${quantity}</span></div>" 
	});

validationMessage Object

The jQuery validation error message to be displayed on form validation.

Default Value:

• null

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		validationRules: { 
			required: true 
		}, 
		validationMessage: { 
			required: "Enter some value" 
		} 
	});

validationRules Object

The jQuery validation rules for form validation.

Default Value:

• null

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		validationRules: { 
			required: true 
		} 
	});

value string

The value to be displayed in the autocomplete textbox.

Default Value:

• null

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		value: "USA" 
	});

visible boolean

Enables or disables the visibility of the autocomplete textbox.

Default Value:

• true

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		visible: false 
	});

watermarkText string

The text to be displayed when the value of the autocomplete textbox is empty.

Default Value:

• null

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		watermarkText: 'Enter the car name' 
	});

width string|number

The width of the Autocomplete textbox.

Default Value:

• null

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({
		width: 200 
	});

Methods

clearText()

Clears the text in the Autocomplete textbox.

NOTE

This method does not accept any arguments.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete("clearText");

destroy()

Destroys the Autocomplete widget.

NOTE

This method does not accept any arguments.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete("destroy");

disable()

Disables the autocomplete widget.

NOTE

This method does not accept any arguments.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete("disable");

enable()

Enables the autocomplete widget.

NOTE

This method does not accept any arguments.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete("enable");

getSelectedItems()

Returns objects (data object) of all the selected items in the autocomplete textbox.

NOTE

This method does not accept any arguments.

Returns: object

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete("getSelectedItems");

getValue()

Returns the current selected value from the Autocomplete textbox.

NOTE

This method does not accept any arguments.

Returns: string

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete("getValue");

getActiveText()

Returns the current active text value in the Autocomplete suggestion list.

NOTE

This method does not accept any arguments.

Returns: string

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete("getActiveText");

hide()

Hides the Autocomplete suggestion list.

NOTE

This method does not accept any arguments.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete("hide");

search()

Search the entered text and show it in the suggestion list if available.

NOTE

This method does not accept any arguments.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete("search");

open()

Open up the autocomplete suggestion popup with all list items.

NOTE

This method does not accept any arguments.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete("open");

selectValueByKey(key)

Sets the value of the Autocomplete textbox based on the given key value.

Name	Type	Description
Key	string	The key value of the specific suggestion item.

NOTE

This method accepts string as an argument.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete("selectValueByKey","IND");

selectValueByText(text)

Sets the value of the Autocomplete textbox based on the given input text value.

Name	Type	Description
Text	string	The text (label) value of the specific suggestion item.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete("selectValueByText","India");

Events

actionBegin

Triggers when the AJAX requests Begins.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the Autocomplete model
type	string	returns the name of the event

NOTE

It internally uses jQuery ajaxStart event. For details refer here.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({
		actionBegin:function(arg){
			//Action Success Code
		} 
	});

actionSuccess

Triggers when the data requested from AJAX will get successfully loaded in the Autocomplete widget.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
count	number	Returns number of times trying to fetch the data
model	object	returns the Autocomplete model
query	object	Returns the query for data retrieval
request	object	Returns the query for data retrieval from the Database
type	string	returns the name of the event
result	array	Returns the number of items fetched from remote data
xhr	object	Returns the requested data

NOTE

It internally uses jQuery ajaxSuccess event. For details refer here.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({
		actionSuccess:function(arg){
			//Action Success Code
		} 
	});

actionComplete

Triggers when the AJAX requests complete. The request may get failed or succeed.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
count	number	Returns number of times trying to fetch the data
model	object	returns the Autocomplete model
query	object	Returns the query for data retrieval
request	object	Returns the query for data retrieval from the Database
type	string	returns the name of the event
result	array	Returns the number of items fetched from remote data
xhr	object	Returns the requested data

NOTE

It internally uses jQuery ajaxComplete event. For details refer here.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({
		actionComplete:function(arg){
			//Action Complete Code
		} 
	});

actionFailure

Triggers when the data requested from AJAX get failed.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
error	object	Returns the error message
model	object	returns the Autocomplete model
query	object	Returns the query for data retrieval
type	string	returns the name of the event

NOTE

It internally uses jQuery ajaxError event. For details refer here.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({
		actionFailure:function(arg){
			//Action Failure Code
		} 
	});

change

Triggers when the text box value is changed.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the autocomplete model object.
type	string	Name of the event.
value	string	Value of the autocomplete textbox.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({
		change: function (argument) {
			//do something
		}
	});

close

Triggers after the suggestion popup is closed.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the autocomplete model object.
type	string	Name of the event.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({ 
		close: function (argument) {
			//do something
		}
	});

create

Triggers when Autocomplete widget is created.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the autocomplete model object.
type	string	Name of the event.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({
		create: function (argument) {
			//do something
		}
	});

destroy

Triggers after the Autocomplete widget is destroyed.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the autocomplete model object.
type	string	Name of the event.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({
		destroy: function (argument) {
			//do something
		}
	});

focusIn

Triggers after the autocomplete textbox is focused.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the autocomplete model object.
type	string	Name of the event.
value	string	Value of the autocomplete textbox.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({
		focusIn: function (argument) {
			//do something
		}
	});

focusOut

Triggers after the Autocomplete textbox gets out of the focus.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the autocomplete model object.
type	string	Name of the event.
value	string	Value of the autocomplete textbox.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({
		focusOut: function (argument) {
			//do something
		}
	});

open

Triggers after the suggestion list is opened.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the autocomplete model object.
type	string	Name of the event.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({  
		open: function (argument) {
			//do something
		}
	});

select

Triggers when an item has been selected from the suggestion list.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the autocomplete model object.
type	string	Name of the event.
value	string	Value of the autocomplete textbox.
text	string	Text of the selected item.
key	string	Key of the selected item.
Item	Object	Data object of the selected item.

Example

JAVASCRIPT

$("#autocomplete").ejAutocomplete({
		select: function (argument) {
			//do something
		}
	});