CODEWITHSUNDEEP
ajaxcontroltoolkitasp.net-4.0autocompleteextender
marc_s
marc_s

Reputation: 754963

Preventing "ENTER" from picking an item from an auto-complete list to close modal popup dialog

I have a setup where I have an ASP.NET 4.0 user control that contains two textboxes, and an OK and a Cancel button.

The first textbox has an Ajax Control Toolkit Autocomplete Extender attached to it, to show the matching list of Swiss zipcodes when the user starts typing something. Works like a charm.

I've also set the DefaultButton of the user control's outermost <asp:Panel> to be the save (OK) button.

Now I'm running into the case where the user starts typing soemthing, gets an "autocompleted" list of choices for his case, and selects one of the items from that auto-complete list. When the user now presses Enter to make his choice, what happens is the data gets filled into the textboxes just fine - but the user control is also closed (it's opened as a modal popup) since the Enter also triggered the DefaultButton to get "clicked" and its handler is executed.

Is there any way to "swallow" or stop that Enter keystroke from bubbling up to the panel?

Here's my markup and code:

<script type="text/javascript">
   function IAmSelected(source, eventArgs) {
       var textval = eventArgs.get_text().split(' - ');

       $('#<%= tbxZipCode.ContainedTextBoxClientID %>').val(textval[0]);
       $('#<%= tbxCity.ContainedTextBoxClientID %>').val(textval[1]);

       // here, I tried "return false;"  - didn't work either....
       source.preventDefault(); 
   }

<asp:Panel runat="server" ID="PanelZipCodes" DefaultButton="btnSave">

    <asp:TextBox runat="server" ID="tbxZipCode" />
    <asp:AutoCompleteExtender runat="server" ID="AutoCompletePlz" TargetControlID="tbxZipCode" BehaviorID="ZipCodeBehavior" 
                              Enabled="True" MinimumPrefixLength="1" CompletionInterval="50" CompletionSetCount="15"
                              FirstRowSelected="True" ServiceMethod="GetMatchingPlz" OnClientItemSelected="IAmSelected" />

    <asp:TextBox runat="server" ID="tbxCity" />

    <asp:Button runat="server" ID="btnSave" OnClick="btnSaveClick" />    
    <asp:Button runat="server" ID="btnCancel" OnClick="btnCancelClick" />
</asp:Panel>

Any ideas? I believe I would have to do something in the IAmSelected script snippet - but what exactly? I tried using return false; - didn't work; then I tried source.preventDefault(); - doesn't work either - the Enter still "bubbles up" to the panel and causes it to "click" the btnSave button and close the modal popup...

Upvotes: 0

Views: 833

Answers (1)

IUnknown
IUnknown

Reputation: 22468

Not sure that this should help by let's try. Download AjaxControlToolkit sources and try to change this file: AutoCompleteBehavior.pre.js

Add to _onKeyDown method single line of code

    else if (k === Sys.UI.Key.enter) {
        if (this._selectIndex !== -1) {
            this._setText(this._completionListElement.childNodes[this._selectIndex]);
            ev.stopPropagation(); // added line
            ev.preventDefault();
        } else {
            // close the popup
            this.hidePopup();
        }
    }

Upvotes: 1

Related Questions