Selecionando as opções <select> digitando - html, menu suspenso

Eu tenho uma lista suspensa simples (<select>) com a seguinte marcação:

<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<!-- ... -->
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<!-- ... -->
<option value="21">21</option>
<option value="22">22</option>
</select>

Quando o menu suspenso tem foco e eu digito 1, 2 (significando a chave 1 primeiro e a chave 2 sem a vírgula), 12 é selecionado. Mesmo para 1, 3 Coincidindo 13 e assim por diante.

No entanto, ao digitar 1, 1 eu esperaria 11 a ser selecionado, mas em vez disso 10 é.

Ao pressionar 1 novamente, o valor selecionado aumenta em 1 para 11, então, para 12 e assim por diante. Com esse comportamento, eu também esperaria ter 1, 2 selecione 2 ao invés de 12, não?

É algum tipo de comportamento padrão? Como isso pode ser alterado para 1, 1 seleciona 11 ao invés de 10?

Conforme apontado pelos comentários, isso parece estar relacionado ao navegador. O Chrome e o Firefox mostram o comportamento descrito, enquanto o Internet Explorer e o Edge estão selecionando 11 em 1, 1.

Respostas:

Eu não acredito que este comportamento seja Especificadas, portanto, cabe ao criador do navegador decidir como implementá-lo.

O comportamento padrão do Chrome parece ser o que você descreve:

1. Dado um repetido pressione o botão (1, 1), o navegador irá ciclo através das opções que começam com aquele personagem específico.

2. Quando a tecla pressiona não "t repetir (1, 2), o navegador selecionará a opção que começa com o inserido seqüência.

O Internet Explorer parece favorecer o segundo comportamento, mesmo com pressionamentos de tecla repetidos, mas voltará a circular depois que o primeiro elemento não correspondente for adicionado à sequência (1, 1, 1 quando a última partida é 11).

<select>
<option>1</option>
<option>15</option>
<option>14</option>
<option>13</option>
<option>12</option>
<option>11</option>
<option>2</option>
<option>20</option>
<option>21</option>
<option>22</option>
</select>

Parece que esse comportamento depende do navegador e de como eles o implementaram (a MS provavelmente deseja corresponder ao comportamento do sistema operacional).

Se você quiser esse comportamento exato para qualquer coisapara o qual seu aplicativo precisa (não recomendado, pois os usuários provavelmente estão esperando um determinado comportamento ao qual estão acostumados), você pode tentar implementar algum JS / jQuery como este:

var keyIdleTimer = null;
var consecKeys = "";

$("select").keypress(function(e){
e.preventDefault();

var key = String.fromCharCode(e.which); //get letter of key

//check if there"s a previous letter pressed
if (keyIdleTimer) {
clearTimeout(keyIdleTimer);
}

consecKeys += key;

$(this).val(consecKeys); //select the value

keyIdleTimer = setTimeout(function(){
keyIdleTimer = null;
consecKeys = "";
}, 500); //time required for a user to hit a second letter
});

Mexa aqui: https://jsfiddle.net/844umqz8/

Acabei de testá-lo no Chrome e não funciona bem com o pop-up suspenso real, mas funciona quando o campo está apenas em foco (sem pop-up), pode funcionar no IE.