ASP.NET AJAX Toolkit Combobox: avoid the need to click ENTER twice to postback

im using a ComboBox for a feature in my application, and i have AutoCompleteMode="Suggest".

However, after i type in the textbox for a search, i need to press ENTER twice to postback and show some results. This is the de开发者_运维知识库fault behavior, like its shown in the oficial demonstration. In my opinion, its kinda annoying and not intuitive...

Anyone have a clue how to avoid this behavior, and press just one time?

Thanks in advance

I faced the same problem and solved it:

You must set autopostback property to "false" if you dont want button to be clicked twice.

Change the AutoPostback attribute of the control to true. This will trap the tab key, which works because the control loses focus.

I doubt there is a good way to trap the enter key for this, unless you're up for breaking open the source code and performing some modifications.

<ajaxToolkit:ComboBox ID="ComboBox1" runat="server" 
     AutoPostBack="True" 
     DropDownStyle="DropDownList" 
     AutoCompleteMode="SuggestAppend" 
     CaseSensitive="False" 
     CssClass="" 
     ItemInsertLocation="Append" ... > 

Tom, Jan is right and it happened to me before. you just need to set you autopostback to false. So, probably you need to set the ComboBox autopostback to false.

I managed to solve this problem with the code below:

In your aspx file, the combobox control will be:

<ajaxToolkit:ComboBox ID="cbCountries" CssClass="AquaStyle2" runat="server" AutoPostBack="true" DropDownStyle="DropDownList"
        AutoCompleteMode="SuggestAppend" CaseSensitive="False" ItemInsertLocation="Append" onkeydown="FireEnterKey(this, event)" />

Then, add a reference to a javascript file, and add there the following function:

function FireEnterKey(elem, evt) {
    var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;

    if (keyCode != 13)
        return;

        var belem = $get(elem.attributes.id.value + "_Button");  //ctl00_ContentPlaceHolder1_cbCountries_Button
        var telem = $get(elem.attributes.id.value + "_TextBox");  //ctl00_ContentPlaceHolder1_cbCountries_TextBox

        if (navigator.userAgent.search("Firefox") >= 0) {
            elem.onchange();
        }
        else if (navigator.userAgent.search("MSIE") >= 0) {
            elem.onchange();
            telem.blur();
        }
        else {  // Opera, Safari, Chrome
            telem.blur();
        }
}

I hope my code above answers your question.