Javascript 更改下拉菜单上的键搜索行为（选择字段）

我有一个下拉列表，其中显示了一个产品列表，其格式为代码描述，如下所示。 是否可以在所选内容中搜索描述而不是代码？ 例如，当用户单击B键时，所需的行为将是选择第四个选项

<option value="34">0050001 - ACUCAR 1KG UNIÃO</option>
<option value="1014">0370024 - AGUA DESTILADA PARA BATERIA 1 LT</option>
<option value="284">0040001 - ALCOOL GEL MULTI USO 500GR MILLE</option>
<option value="459">0010001 - BALDE PLASTICO 10L</option>
<option value="460">0010002 - BALDE PLASTICO 20L</option>
<option value="486">0020004 - BALDE PLÁSTICO COM ESPREMEDOR PULIRE</option>
<option value="285">0040002 - BASE SELADORA PROFIX MAX 2GL 5L ECOLAB</option>
<option value="491">0020009 - CABO ALUMINIO 1,40MTS C MANOPLA PARA MOP AGUA</option>
<option value="492">0020010 - CABO ALUMINIO 1,40MTS C MANOPLA UNIVERSAL CINZA</option>
etc

---

如果不使用插件，这可能会很棘手。我最终使用了jQuery，在keyup上触发超时，在keydown上重置超时

逻辑是超时处理写入过程，当停止时，使用jQuery搜索以写入的字符开头的第一个选项元素，并将其设置为选中

代码：

演示：

已知问题：

后台空间打开选择选项并中断逻辑 打开select时，无法识别自定义键入，它使用 内置式

//setup before functions
var typingTimer;               //timer identifier
var doneTypingInterval = 500;  //time in ms, 5 second for example
var keyText='';

//on keyup, start the countdown
$('#SomeDropdown').keyup(function(e){
    clearTimeout(typingTimer);
    keyText+=String.fromCharCode(e.which);
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$('#SomeDropdown').keydown(function(e){
    clearTimeout(typingTimer);    
});

//user is "finished typing," do something
function doneTyping () {

    $("#SomeDropdown option").filter(function() {
        return this.text.replace(/^[^-]*-/, '').trim().toUpperCase().indexOf(keyText, 0) === 0; 
    }).attr('selected', true);

    keyText='';
}