根据值属性使用键盘选择选项

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>

我有月份的列表，它们有代表月份的数值。我需要在聚焦时通过在键盘上键入 3 来选择 Mar。

现在我必须输入“m”来选择 Mar 或任何月份的第一个字母来选择那个月份。

你可以在这里看看小提琴：https://jsfiddle.net/tn0gL34h/1/

Answer 1

检查一下，我稍微修改了 ahmad 的答案，这也适用于 2 位数字。 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 2

从 1 月到 9 月的几个月内，以下代码都可以使用，因为它们都需要一次按键。

对于其他月份，第 10 个月、第 11 个月和第 12 个月，您必须手动选择。

$('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 3

据我所知，唯一可靠的方法是使用 javacript 选择菜单替换插件。在选择集中时捕获按键的技术适用于某些浏览器，但不适用于其他浏览器（请参阅此处的更多讨论：keydown event in drop down list）。事实上，尽管其他人提到它对他们有用，但 Ahmad 上面的回答在我的浏览器上不起作用（Chrome 49 / OS X 10.8）。

这是一个示例，说明如何使用 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>