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

Question

I have a dropdown which shows a list of products formatted as "code - description" as shown bellow. Is it possible to search the selection for description instead of code? When the user click the "B" key for example the desired behaviour would be to select the 4th option.

<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

Without using a plugin this can be tricky. I ended up using jQuery, a timeout fired on keyup and reset on keydown.

The logic is that the timeout handle the writing process, when stopped, using jQuery, search for the first option element that starts with the chars wrote and set it as selected.

Code:

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

Demo: http://jsfiddle.net/v5vq7jL6/

Known issues:

• back space open the select option and break the logic
• when opened the select, custom typing is not recognized, it use the built in one