CODEWITHSUNDEEP
htmldrop-down-menu
KingKerosin
KingKerosin

Reputation: 3851

Selecting <select> options by typing

I have a simple dropdown (<select>) with the following markup:

<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>

When the dropdown has focus and I type 1, 2 (meaning key 1 first and the key 2 without the comma), 12 is selected. Same for 1, 3 matching 13 and so on.

However, when typing 1, 1 I would expect 11 to be selected, but instead 10 is.

When pressing 1 again, the selected value increases by 1 to 11, then to 12 and so on. With this behavior I would also expect having 1, 2 select 2 instead of 12, no?

Is this some kind of default behavior? How can this be changed so 1, 1 selects 11 instead of 10?

As pointed out by comments, this seems to be related to the browser. Chrome and Firefox show the described behavior whereas Internet Explorer and Edge are selecting 11 on 1, 1.

Upvotes: 2

Views: 2057

Answers (2)

Akurn
Akurn

Reputation: 392

Looks like this behaviour is dependant on the browser and how they've implemented it (MS most likely wanting to match the operating systems behaviour).

If you want this exact behaviour for whatever your application needs it for (not recommended as users are probably expecting a certain behaviour that they're used to), you could try implementing some JS/jQuery like this:

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
});

Fiddle here: https://jsfiddle.net/844umqz8/

I just tested it in Chrome, and doesn't quite work with the actual dropdown popup, but does work when the field is just in focus (with no popup), might work on IE.

Upvotes: 0

CodeCaster
CodeCaster

Reputation: 151730

I don't believe this behavior is specified, so it's up to the browser creator to decide how to implement it.

Chrome's default behavior seems to be what you describe:

  1. Given a repeated keypress (1, 1), the browser will cycle through the options that start with that particular character.

  2. When the keypresses don't repeat (1, 2), the browser will select the option that starts with the entered sequence.

Internet Explorer seems to favor the second behavior even with repeated keypresses, but will fall back to cycling after the first non-matching element is added to the sequence (1, 1, 1 when the last match is 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>

Upvotes: 1

Related Questions