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”以选择3月或任何月份的首字母来选择该月。

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

Answer 1

从一月到九月的几个月中，以下代码将起作用，因为它们都需要一次击键。

对于其他月份（第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 2

检查此内容，我已经稍微修改了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 3

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

以下是使用Select2的修改后的匹配器方法的示例：

import { Component, ViewChild,ElementRef,OnInit } from '@angular/core';
import * as jsPDF from 'jspdf';
@Component({
  selector: 'app-listuser',
  templateUrl: './listuser.component.html',
  styleUrls: ['./listuser.component.css'],
})
export class ListuserComponent implements OnInit {

  ngOnInit() {
    this.filteredUsers = this.users.slice();
    this._userService.getUsers().subscribe((users) => {
      this.users = users;          
    }, (error) => {
      console.log(error);
    })
  }

  @ViewChild('content') content:ElementRef;
  public downloadPDF(){
    let doc=new jsPDF();
    let specialElementHandlers={
      '#editor':function(element,renderer){
        return true;
      }
    };
    let content=this.content.nativeElement;
    doc.fromHTML(content.innerHTML,15,15 ,{
      'width':50,
      'elementHandlers':specialElementHandlers
    });

    doc.save('test.pdf');
  }
}

$('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;
}

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

3 个答案: