Question

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

<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

Answer 1

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

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

代码：

//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='';
}

演示：http://jsfiddle.net/v5vq7jL6/

已知问题：

后退空间打开选择选项并打破逻辑
当打开select时，自定义输入无法识别，它使用了内置于一个

更改下拉列表中的键搜索行为（选择字段）

1 个答案: