Select option using keyboard based on value attribute

Question

<select>
 <option value="1">Jan</option>
 <option value="2">Feb</option>
 <option value="3">Mar</option>
 <option value="4">Apr</option>
 <option value="5">May</option>
 <option value="6">Jun</option>
 <option value="7">Jul</option>
 <option value="8">Aug</option>
 <option value="9">Sept</option>
 <option value="10">Oct</option>
 <option value="11">Nov</option>
 <option value="12">Dec</option>
</select>

I have the list of the month and they have numeric value to represent month number. I need to Mar to be selected by typing 3 on keyboard when it is focused.

Now I have to type "m" to select Mar or first letter of any month to select that month.

You can have a look at the fiddle here : https://jsfiddle.net/tn0gL34h/1/

Answer 1

For months from January to September, the following code will work, because they all require a single keystroke.

For the others, Month 10, 11, and 12, you will have to select manually.

 $('select').on('keyup',function(e){ // this will only work for Jan --> Sep // becuase Oct --> Dec require two digits $(this).val(parseInt(e.key)); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <select> <option value="1">Jan</option> <option value="2">Feb</option> <option value="3">Mar</option> <option value="4">Apr</option> <option value="5">May</option> <option value="6">Jun</option> <option value="7">Jul</option> <option value="8">Aug</option> <option value="9">Sept</option> <option value="10">Oct</option> <option value="11">Nov</option> <option value="12">Dec</option> </select> 

Answer 2

check this i have modified ahmad's answer little bit, this will work for 2 digits also. source

 var typingTimer; var doneTypingInterval = 1000; var $input = $('select'); var keys = ''; $input.on('keyup', function (e) { keys += parseInt(e.key); console.log(keys); clearTimeout(typingTimer); typingTimer = setTimeout(doneTyping, doneTypingInterval); }); //on keydown, clear the countdown $input.on('keydown', function () { clearTimeout(typingTimer); }); //user is "finished typing," do something function doneTyping () { if(keys != ''){ //do something $input.val(parseInt(keys)); keys=''; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <select> <option value="1">Jan</option> <option value="2">Feb</option> <option value="3">Mar</option> <option value="4">Apr</option> <option value="5">May</option> <option value="6">Jun</option> <option value="7">Jul</option> <option value="8">Aug</option> <option value="9">Sept</option> <option value="10">Oct</option> <option value="11">Nov</option> <option value="12">Dec</option> </select> 

Answer 3

As far as I know, the only reliable way to do this would be to use a javacript select menu replacement plugin. The techniques for capturing keypresses while a select is focused work on some browsers but not others (see more discussion on this here: keydown event in drop down list ). In fact, though others have mentioned it works for them, Ahmad's answer above does not work on my browser (Chrome 49 / OS X 10.8).

Here is an example of how you could do this with a modified matcher method using Select2 :

 $('select').select2({ matcher: function(params, data) { if ($.trim(params.term) === '') { return data; } else if (data.id.indexOf(params.term) === 0) { // this is where the magic happens // we return options where search input matches // the beginning of the value return data; } else { return null; } } }); 

 select { width: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> <select> <option value="1">Jan</option> <option value="2">Feb</option> <option value="3">Mar</option> <option value="4">Apr</option> <option value="5">May</option> <option value="6">Jun</option> <option value="7">Jul</option> <option value="8">Aug</option> <option value="9">Sept</option> <option value="10">Oct</option> <option value="11">Nov</option> <option value="12">Dec</option> </select>