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/

Welcome to stackoverflow. Did you consider naming each month like this: `1 - Jan` and `2 - Feb`, and so on? — Ahmad, Nov 15 '18 at 05:46
I don't need month number to be shown to the user. I had thought of doing this. — Nirmal Rijal, Nov 15 '18 at 05:49

score 3 · Answer 1 · answered Nov 15 '18 at 05:52

3

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>

answered Nov 15 '18 at 05:52

Ahmad

11,639
6
48
79

You have to select the combo box first. Either click on it or highlight it @Teemu – Ahmad Nov 15 '18 at 05:54
I am using Chrome and this works fine. I will check with IE @Teemu – Ahmad Nov 15 '18 at 05:55
If you type number with two digits, it won't work (try typing 11) – Alon Shmiel Nov 15 '18 at 06:01
@AlonShmiel I agree. The code would have to be re-written to take into account some time delay before accepting a combination of keystrokes – Ahmad Nov 15 '18 at 06:02
Actually this works in FF too (and Edge). In FF you've to select a month with a mouse first, or navigate to the select with TAB. – Teemu Nov 15 '18 at 06:06
This does not work in my browser (Chrome v49 on OS X) – Eaten by a Grue Nov 15 '18 at 06:44

score 3 · Accepted Answer · answered Nov 15 '18 at 06:47

3

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>

answered Nov 15 '18 at 06:47

Dhaval Pankhaniya

1,998
1
13
26

what error you are getting in console ? may b we can fix that – Dhaval Pankhaniya Nov 15 '18 at 06:51
there's no error, it simply doesn't work on some browsers. Mine for instance - the `keyup` event is not captured when select menu is open. There's a link in my answer below with a whole bunch of discussion on this. – Eaten by a Grue Nov 15 '18 at 06:53
i guess it's browsers behavior that is preventing keydown event when select menu is open – Dhaval Pankhaniya Nov 15 '18 at 06:54
yes - your answer is good one if you know what browser twill be used. for instance - if this was an app used by staff in a controlled environment it would be fine. – Eaten by a Grue Nov 15 '18 at 06:55
i found [this link](https://stackoverflow.com/a/31172850/4395050) it says it's google chrome specific, please check – Dhaval Pankhaniya Nov 15 '18 at 07:05
I have made some changes to @DhavalPankhaniya code here. I have checked it only on chrome https://jsfiddle.net/nirmalrizal/exmvLqun/ and for now this works for me – Nirmal Rijal Nov 15 '18 at 07:07
@NirmalRijal - it will work on Chrome on Windows but not OS X. The jsfiddle you posted does not work for me. You should use this solution only if you don't need to support Mac users with Chrome. – Eaten by a Grue Nov 15 '18 at 07:17

Eaten by a Grue · Answer 3 · 2018-11-15T06:49:52.300

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>

Select option using keyboard based on value attribute

3 Answers3