ejAutocomplete

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 
    	});

    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
    		}
    	});