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

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>