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>