ejmAutocomplete

5 Jun 202324 minutes to read

The Essential JavaScript Mobile AutoComplete widget is a text box control that provides a list of suggestions based on a user’s query.

Custom Design for HTML AutoComplete control.

$(element).ejmAutocomplete()

Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
        <input id="autocomplete" />
        <script>
            // Create autocomplete
            $("#autocomplete").ejmAutocomplete({ dataSource: "window.datasrc", fields: { text: "name" } });
        </script>

    Requires

    • module:jQuery

    • module:ej.core

    • module:ej.unobtrusive

    • module:ej.mobile.core

    • module:ej.mobile.listview

    • module:ej.mobile.scrollpanel

    • module:ej.data

    • module:ej.touch

    Members

    allowSorting Boolean

    Specifies the whether allowSorting to be allowed or not in suggestion list on initialization

    Default Value:

    • true

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-allowsorting=true data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
        <input id="autocomplete" />
        <script>
            //To set the allowSorting API value
            $("#autocomplete").ejmAutocomplete({ allowSorting: true, dataSource: "window.datasrc", fields: { text: "name" } });
        </script>

    caseSensitiveSearch Boolean

    Specifies whether to search key is case sensitive or not on initialization.

    Default Value:

    • false

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-casesensitivesearch=true data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
        <input id="autocomplete" />
        <script>
            //To set the caseSensitiveSearch API value
            $("#autocomplete").ejmAutocomplete({ caseSensitiveSearch: true, dataSource: "window.datasrc", fields: { text: "name" } });
        </script>

    cssClass String

    Sets the root class for AutoComplete theme. This cssClass API helps to use custom skinning option for AutoComplete control. By defining the root class using this API, we need to include this root class in CSS.

    Default Value:

    • ””

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-cssclass="customclass" data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
        <input id="autocomplete" />
        <script>
            //To set the cssClass API value
            $("#autocomplete").ejmAutocomplete({ cssClass: "customclass", dataSource: "window.datasrc", fields: { text: "name" } });
        </script>

    dataSource data

    Specifies the data source for AutoComplete rendering. In AutoComplete , options can be given as data source of JSON array.

    Default Value:

    • []

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
        <input id="autocomplete" />
        <script>
            // Create autocomplete
            $("#autocomplete").ejmAutocomplete({ dataSource: "window.datasrc", fields: { text: "name" } });
        </script>

    delimiterChar String

    Specifies the delimiterChar string for Multivalue mode that separates two items.

    Default Value:

    • ”,”

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-enablemultiselect="true" data-ej-delimiterchar="-" data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
        <input id="autocomplete" />
        <script>
            // Create autocomplete
            $("#autocomplete").ejmAutocomplete({ dataSource: "window.datasrc", enableMultiSelect: true, delimiterChar: "-", fields: { text: "name" } });
        </script>

    emptyResultText String

    Specifies the text that to be displayed while there is no suggestion for AutoComplete search key

    Default Value:

    • null

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-emptyresulttext="No suggestions" data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
        <input id="autocomplete" />
        <script>
            //To set the emptyResultText API value
            $("#autocomplete").ejmAutocomplete({ emptyResultText: "No suggestions", dataSource: "window.datasrc", fields: { text: "name" } });
        </script>

    enableAutoFill Boolean

    Specifies whether to auto fill option by which we can select and show up the first search result in textbox on initialization.

    Default Value:

    • false

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-enableautofill=true data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
        <input id="autocomplete" />
        <script>
            //To set the enableAutoFill API value
            $("#autocomplete").ejmAutocomplete({ enableAutoFill: true, dataSource: "window.datasrc", fields: { text: "name" } });
        </script>

    enabled Boolean

    Specifies whether to enable the autoComplete on initialization.

    Default Value:

    • true

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-enabled=false data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
        <input id="autocomplete" />
        <script>
            //To set the enabled API value
            $("#autocomplete").ejmAutocomplete({ enabled: false, dataSource: "window.datasrc", fields: { text: "name" } });
        </script>

    enableDistinct Boolean

    Specifies whether the duplicate results to be shown or not in search results

    Default Value:

    • false

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-enabledistinct=true data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
        <input id="autocomplete" />
        <script>
            //To set the enableDistinct API value
            $("#autocomplete").ejmAutocomplete({ enableDistinct: false, dataSource: "window.datasrc", fields: { text: "name" } });
        </script>

    enableMultiSelect Boolean

    Specifies whether to accept multiple values or not.

    Default Value:

    • false

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-enablemultiselect=true data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
        <input id="autocomplete" />
        <script>
            //To set the enableMultiSelect API value
            $("#autocomplete").ejmAutocomplete({ enableMultiSelect: true, dataSource: "window.datasrc", fields: { text: "name" } });
        </script>

    enablePersistence Boolean

    Current model value to browser cookies for state maintains. While refresh the Autocomplete control page retains the model value apply from browser cookies.

    Default Value:

    • false

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-enablepersistence=false data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
        <input id="autocomplete" />
        <script>
            //To set the enablePersistence API value
            $("#autocomplete").ejmAutocomplete({ enablePersistence: false, dataSource: "window.datasrc", fields: { text: "name" } });
        </script>

    fields

    Fields used to bind the data source and it includes following field members to make data bind easier.

    fields.image String

    Specifies the name of the field from the data source that contains image URL values.

    Default Value:

    • null.

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-datasource="window.datasrc" data-ej-fields-image="image" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
        <input id="autocomplete" />
        <script>
            //To set the enablePersistence API value
            $("#autocomplete").ejmAutocomplete({ dataSource: "window.datasrc", fields: { text: "name", image: "image" } });
        </script>

    fields.key String

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

    Default Value:

    • null.

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
    <input id="autocomplete" data-role="ejmautocomplete" data-ej-datasource="window.datasrc" data-ej-fields-key="key" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
        <input id="autocomplete" />
        <script>
            //To set the enablePersistence API value
            $("#autocomplete").ejmAutocomplete({ dataSource: "window.datasrc", fields: { text: "name", key: "key" } });
        </script>

    fields.text String

    Specifies the name of the field from the data source to bind to the Text property of an AutoComplete item.

    Default Value:

    • null.

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
        <input id="autocomplete" />
        <script>
            //To set the enablePersistence API value
            $("#autocomplete").ejmAutocomplete({ dataSource: "window.datasrc", fields: { text: "name" } });
        </script>

    filterType Enum

    Specifies the type of the filter by which the filtering occurs. SeeFilterType

    Default Value:

    • startswith

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-filtertype="contains" data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
        <input id="autocomplete" />
        <script>
            //To set the filterType API value
            $("#autocomplete").ejmAutocomplete({ filterType: "contains", dataSource: "window.datasrc", fields: { text: "name" } });
        </script>

    itemsCount Number

    Specifies the number of items shown in the suggestion list.

    Default Value:

    • 0

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-itemscount=5 data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
    <input id="autocomplete" />
        <script>
            //To set the itemsCount API value
            $("#autocomplete").ejmAutocomplete({ itemsCount: 5, dataSource: "window.datasrc", fields: { text: "name" } });
        </script>

    locale String

    Change the AutoComplete text format based on given culture.

    Default Value:

    • “en-US”

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-locale="en-US" data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
        <input id="autocomplete" />
        <script>
            //To set the mode API value
            $("#autocomplete").ejmAutocomplete({ dataSource: "window.datasrc", fields: { text: "name" }, locale: "en-US" });
        </script>

    minCharacter Number

    Specifies the minimum search key length, which only AutoComplete queries from the datasource.

    Default Value:

    • 1

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-mincharacter=2 data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
    <input id="autocomplete" />
        <script>
            //To set the minCharacter API value
            $("#autocomplete").ejmAutocomplete({ dataSource: "window.datasrc", fields: { text: "name" }, minCharacter: 2 });
        </script>

    mode Enum

    Specifies the AutoComplete mode. SeeMode

    Default Value:

    • default

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-mode="search" data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
    <input id="autocomplete" />
        <script>
            //To set the mode API value
            $("#autocomplete").ejmAutocomplete({ mode: "search", dataSource: "window.datasrc", fields: { text: "name" } });
        </script>

    popupHeight String

    Specifies the AutoComplete popup height.

    Default Value:

    • “164px”

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-popupheight="100px" data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
        <input id="autocomplete" />
        <script>
            //To set the mode API value
            $("#autocomplete").ejmAutocomplete({ dataSource: "window.datasrc", fields: { text: "name" }, popupHeight: "100px" });
        </script>

    popupWidth String

    Specifies the AutoComplete popup width.

    Default Value:

    • “auto”

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
       <input id="autocomplete" data-role="ejmautocomplete" data-ej-popupwidth="500px" data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
        <input id="autocomplete" />
        <script>
            //To set the mode API value
            $("#autocomplete").ejmAutocomplete({ dataSource: "window.datasrc", fields: { text: "name" }, popupWidth: "500px" });
        </script>

    renderMode Enum

    Changes the rendering mode of the autocomplete. SeeRenderMode

    Default Value:

    • auto

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-rendermode="auto" data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
        <input id="autocomplete" />
        <script>
            //To set the renderMode API value
            $("#autocomplete").ejmAutocomplete({ renderMode: ej.mobile.RenderMode.Auto, dataSource: "window.datasrc", fields: { text: "name" } });
        </script>

    showEmptyResultText Boolean

    Specifies the search result to be shown or not while there is no suggestion for AutoComplete search key

    Default Value:

    • true

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-showemptyresulttext=false data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
        <input id="autocomplete" />
        <script>
            //To set the showEmptyResultText API value
            $("#autocomplete").ejmAutocomplete({ showEmptyResultText: false, dataSource: "window.datasrc", fields: { text: "name" } });
        </script>

    sortOrder Enum

    Specifies the suggestion list sorting order. SeeSortOrder

    Default Value:

    • ascending

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-sortorder="descending" data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
        <input id="autocomplete" />
        <script>
            //To set the sortOrder API value
            $("#autocomplete").ejmAutocomplete({ sortOrder: "Descending", dataSource: "window.datasrc", fields: { text: "name" } });
        </script>

    templateId String

    Specifies ID of the element that contains template contents.

    Default Value:

    • “”

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-templateid="template" data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
        <input id="autocomplete" />
        <script>
            //To set the templateId API value
            $("#autocomplete").ejmAutocomplete({ templateId: "template", dataSource: "window.datasrc", fields: { text: "name" } });
        </script>

    value String

    Specifies the textbox value on initialization

    Default Value:

    • ””

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-value="Text" data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
    <input id="autocomplete" />
        <script>
            //To set the value API value
            $("#autocomplete").ejmAutocomplete({ value: "Text", dataSource: "window.datasrc", fields: { text: "name" } });
        </script>

    watermarkText String

    Specifies the autocomplete watermark text that to be shown on autocomplete text box when it is empty

    Default Value:

    • null

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-watermarktext="Search" data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • HTML
  • <!-- Obtrusive way of rendering -->
        <input id="autocomplete" />	
        <script>
            //To set the watermarkText API value
            $("#autocomplete").ejmAutocomplete({ watermarkText: "Search", dataSource: "window.datasrc", fields: { text: "name" } });
        </script>

    Methods

    clearText()

    Clears the selected items in AutoComplete

    Example

  • HTML
  • <input id="autocomplete" />
        <script>
            $(function () {
                // Clears text of autocomplete
                $("#autocomplete").ejmAutocomplete({ dataSource: "window.datasrc", fields: { text: "name" } });
                $("#autocomplete").ejmAutocomplete("clearText");
            });
        </script>

    disable()

    To disable AutoComplete

    Example

  • HTML
  • <input id="autocomplete" />
        <script>
            $(function () {
                // Disable autocomplete
                $("#autocomplete").ejmAutocomplete({ dataSource: "window.datasrc", fields: { text: "name" } });
                $("#autocomplete").ejmAutocomplete("disable");
            });
        </script>

    enable()

    To enable AutoComplete

    Example

  • HTML
  • <input id="autocomplete" />
        <script>
            $(function () {
                // Enable the autocomplete
                $("#autocomplete").ejmAutocomplete({ dataSource: "window.datasrc", fields: { text: "name" } });
                $("#autocomplete").ejmAutocomplete("enable");
            });
        </script>

    getSelectedItems()

    To get the list of items selected in AutoComplete

    Example

  • HTML
  • <input id="autocomplete" />
        <script>
            $(function () {
                // GetSelectedItems of  autocomplete
                $("#autocomplete").ejmAutocomplete({ dataSource: "window.datasrc", fields: { text: "name" } });
                $("#autocomplete").ejmAutocomplete("getSelectedItems");
            });
        </script>

    getValue()

    To get the value of AutoComplete

    Example

  • HTML
  • <input id="autocomplete" />
        <script>
            $(function () {
                // Getvalue of  autocomplete
                $("#autocomplete").ejmAutocomplete({ dataSource: "window.datasrc", fields: { text: "name" } });
                $("#autocomplete").ejmAutocomplete("getValue");
            });
        </script>

    Events

    change

    Event triggers when the AutoComplete text box content changed.

    Name Type Description
    argument Object Event parameters from autocomplete

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    model string Returns the autocomplete model
    type string Returns the name of the event
    data Object Returns the current selected data
    index int Returns the selecteditem index
    text string Returns the current item text
    isChecked boolean Returns whether the current item is checked or not

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
      <input id="autocomplete" data-role="ejmautocomplete" data-ej-datasource="window.datasrc" data-ej-fields-text="name" data-ej-change="onChange" />
        <script>
            // change event for autocomplete
            function onChange(args) {
                //handle the event
            }
        </script>
  • HTML
  • <!-- Obtrusive way of rendering -->
    <input id="autocomplete" />
        <script>
            $("#autocomplete").ejmAutocomplete({
                dataSource: "window.datasrc", fields: { text: "name" },
                change: function (args) {
                    //handle the event
                }
            });
        </script>

    focusIn

    Event triggers when focused in to the Autocomplete text box

    Name Type Description
    argument Object Event parameters from autocomplete

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    model string Returns the autocomplete model
    type string Returns the name of the event
    isInteraction boolean if the autocomplete textbox is interacted return true; otherwise return false

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
    <input id="autocomplete" data-role="ejmautocomplete" data-ej-datasource="window.datasrc" data-ej-fields-text="name" data-ej-focusin="onfocusIn" />
        <script>
            // focusIn event for autocomplete
            function onfocusIn(args) {
                //handle the event
            }
        </script>
  • HTML
  • <!-- Obtrusive way of rendering -->
    <input id="autocomplete" />
        <script>
            $("#autocomplete").ejmAutocomplete({
                dataSource: "window.datasrc", fields: { text: "name" },
                focusIn: function (args) {
                    //handle the event
                }
            });
        </script>

    focusOut

    Event triggers when focused out from the Autocomplete text box

    Name Type Description
    argument Object Event parameters from autocomplete

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    model string Returns the autocomplete model
    type string Returns the name of the event
    isInteraction boolean if the autocomplete textbox is interacted return true; otherwise return false

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
    <input id="autocomplete" data-role="ejmautocomplete" data-ej-datasource="window.datasrc" data-ej-fields-text="name" data-ej-focusout="onfocusOut" />
        <script>
            // focusOut event for autocomplete
            function onfocusOut(args) {
                //handle the event
            }
        </script>
  • HTML
  • <!-- Obtrusive way of rendering -->
    <input id="autocomplete" />
        <script>
            $("#autocomplete").ejmAutocomplete({
                dataSource: "window.datasrc", fields: { text: "name" },
                focusOut: function (args) {
                    //handle the event
                }
            });
        </script>

    keyPress

    Event triggers when pressed a key

    Name Type Description
    argument Object Event parameters from autocomplete

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    model string Returns the autocomplete model
    type string Returns the name of the event
    isInteraction boolean if the autocomplete textbox is interacted return true; otherwise return false

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
        <input id="autocomplete" data-role="ejmautocomplete" data-ej-datasource="window.datasrc" data-ej-fields-text="name" data-ej-keypress="onkeyPress" />
        <script>
            // keyPress event for autocomplete
            function onkeyPress(args) {
                //handle the event
            }
        </script>
  • HTML
  • <!-- Obtrusive way of rendering -->
    <input id="autocomplete" />
        <script>
            $("#autocomplete").ejmAutocomplete({
                dataSource: "window.datasrc", fields: { text: "name" },
                keyPress: function (args) {
                    //handle the event
                }
            });
        </script>

    select

    Event triggers when we select an element from AutoComplete suggestion list.

    Name Type Description
    argument Object Event parameters from autocomplete

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    model string Returns the autocomplete model
    type string Returns the name of the event
    element Object Returns the current element
    text string Returns the current item text
    isChecked boolean Returns whether the current item is checked or not
    isSelected boolean Returns any item is selected or not

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
    <input id="autocomplete" data-role="ejmautocomplete" data-ej-datasource="window.datasrc" data-ej-fields-text="name" data-ej-select="onSelect" />
        <script>
            // select event for autocomplete
            function onSelect(args) {
                //handle the event
            }
        </script>
  • HTML
  • <!-- Obtrusive way of rendering -->
    <input id="autocomplete" />
        <script>
            $("#autocomplete").ejmAutocomplete({
                dataSource: "window.datasrc", fields: { text: "name" },
                select: function (args) {
                    //handle the event                
                }
            });
        </script>

    touchEnd

    Event triggers when the touch end happens in the AutoComplete suggestion list.

    Name Type Description
    argument Object Event parameters from autocomplete

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    model string Returns the autocomplete model
    type string Returns the name of the event
    data Object Returns the selected object
    text string Returns the current item text
    isChecked boolean Returns whether the current item is checked or not
    isSelected boolean Returns any item is selected or not
    isInteraction boolean if the autocomplete textbox is interacted return true; otherwise return false

    Example

  • HTML
  • <!-- Unobtrusive way of rendering -->
    <input id="autocomplete" data-role="ejmautocomplete" data-ej-datasource="window.datasrc" data-ej-fields-text="name" data-ej-touchend="onTouchEnd" />
        <script>
            // touchEnd event for autocomplete
            function onTouchEnd(args) {
                //handle the event
            }
        </script>
  • HTML
  • <!-- Obtrusive way of rendering -->
    <input id="autocomplete" />
        <script>
            $("#autocomplete").ejmAutocomplete({
                dataSource: "window.datasrc", fields: { text: "name" },
                touchEnd: function (args) {
                    //handle the event
                }
            });
        </script>