Question

here’s a dropdownlist that posts back on selected index changed.

<asp:DropDownList ID="_ddlClientType" runat="server"  AutoPostBack = "true"
   OnSelectedIndexChanged="ClientType_SelectedIndexChanged"  >                                 
   <asp:ListItem Value="-1" Text="CANCEL.."></asp:ListItem>
   <asp:ListItem Value="11" Text="External"></asp:ListItem>
   <asp:ListItem Value="12" Text="Internal"></asp:ListItem>
   <asp:ListItem Value="13" Text="TOM"></asp:ListItem>
</asp:DropDownList>   

When using the mouse, everything works perfectly. However, I want user to be able to press key to select different items either by by using up/down arrow key. Also when when user type a letter, then the first item starting with that letter gets highlighted.

The problem is when a different item gets selected in the dropdownlist, the page posts back because of the “OnSelectedIndexChanged” event.

Is there a way to prevent the postback to occur when key are being pressed (as opposed to mouse being clicked), until the enter key is pressed?

EDIT

I’m able to display the alert prompt when a key is pressed

$('select').keypress(function () {
  alert('A key was pressed')
});

Now, I need to know which key was pressed. Thus, I’ll be able to make a decision.

Answer 1

There is a bit of a mistake in your question:

The problem is when a different item gets selected in the dropdownlist, the page posts back because of the "OnSelectedIndexChanged" event.

The page is actually posting back because of AutoPostBack = "true".

First change AutoPostBack to False.

Then I would suggest that you handle the change event and the keypress event differently. If you handle the change event using jQuery and then submit inside that change event and also handle the keydown and filter for keys then you can submit only when you want to.

$("#TargetSelect").change(function(event){
    console.debug($(this).val());
});
$("#TargetSelect").keydown(function(event){
    event.preventDefault();
  if(event.which == 13){
     $(this).trigger('change');
  }else if(event.which == 38){
    var idx = this.selectedIndex;
    if(idx != 0){
      $("#TargetSelect").prop('selectedIndex', idx-1); 
    }
  }else if(event.which == 40){
    var idx = this.selectedIndex;
    var maxIndex = $('select').children('option').length;
    idx += 1;           
    if(idx < maxIndex){
      $("#TargetSelect").prop('selectedIndex', idx); 
    }
  }else{
      var $options = $('select').children('option');
      $options.each(function(){
        if(String.fromCharCode(event.which) == $(this).text().charAt(0)){
          var idx = $(this).index();
          $("#TargetSelect").prop('selectedIndex', idx);     
        }
      });
    }
});

Here is an (updated) example. Replace the console.debug with submit of the form and you should be golden.

If you have multiple select boxes the code should be as follows:

$("select").change(function(event){
    console.debug($(this).val());
});
$("select").keydown(function(event){
    event.preventDefault();
  if(event.which == 13){
     $(this).trigger('change');
  }else if(event.which == 38){
    var idx = this.selectedIndex;
    if(idx != 0){
      $(this).prop('selectedIndex', idx-1); 
    }
  }else if(event.which == 40){
    var idx = this.selectedIndex;
    var maxIndex = $(this).children('option').length;
    idx += 1;           
    if(idx < maxIndex){
      $(this).prop('selectedIndex', idx); 
    }
  }else{
      var $options = $(this).children('option');
      var $thisSelect = $(this);
      $options.each(function(){
        if(String.fromCharCode(event.which) == $(this).text().charAt(0)){
          var idx = $(this).index();
          $thisSelect.prop('selectedIndex', idx);     
        }
      });
    }
});

Also be aware that if you have two entries that start with the letter typed, then you will select the last entry. A modification could be made to the code to allow for the box to be filtered.

Example for multiple boxes