/asp-net-web-forms-textbox-apply-jquery-autocomplete-plugin

Apply the jQuery AutoComplete plugin to a text box editor.

Primary LanguageASP.NETOtherNOASSERTION

Text Box for ASP.NET Web Forms - How to apply the jQuery AutoComplete plugin to an editor

This example demonstrates how to apply the jQuery AutoComplete plugin to a text box editor.

AutoComplete plugin

Overview

To apply jQuery selectors to a text box editor, use one of the following approaches:

  • Add a ASPxGlobalEvents component to the page and handle its client-side ControlsInitialized event to initialize the text box editor. To access the editor, use its ClientInstanceName property.

    function OnControlsInitialized(s, e) {
    $(txt.GetInputElement()).autocomplete({
        source: availableTags,
        position: {
            my: "left top",
            at: "left bottom",
            of: txt.GetMainElement()
        },
        select: function (event, ui) {
            txt.SetValue(ui.item.value);
        }
    });
}

  • Handle the editor's client-side Init event and use the s parameter to get the corresponding the client object.

    function OnTextBoxInit(s, e) {
    $(s.GetInputElement()).autocomplete({
        source: availableTags,
        position: {
            my: "left top",
            at: "left bottom",
            of: s.GetMainElement()
        },
        select: function (event, ui) {
            s.SetValue(ui.item.value);
        }
    });
}

Files to Review

Documentation

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)