Skip to content Skip to sidebar Skip to footer

Html Select Keystroke Timeout

I'm creating a standard html select dropdown with a hundred or so entries. My users would like to be able to type in the value to get to the proper selection faster. While this is

Solution 1:

You could use a <datalist> instead. It's supported in IE10 and higher. MDN Page

DEMO

<label for="poison">Choose your poison</label>
<input id="poison" name="poison" list="poisons" />

<datalist id="poisons">
    <option value="Cider" selected>Apple Cider</option>
    <option value="Juice">Apple Juice</option>
    <option value="Curacao">Curacao</option>
    <option value="Jack">Jack's Hard Cider</option>
    <option value="Jake">Jake's Hard Cider</option>
    <option value="James">James' Hard Cider</option>
    <option value="Jamison">Jamison Irish Whiskey</option>
    <option value="Kool">Kool Ade</option>
    <option value="Lemonade">Lemonade</option>
    <option value="Prune">Prune Juice</option>
</datalist>

Solution 2:

If you have a small number of entries, the answer using datalist is fantastic. However, my users were using lists that had over a hundred entries and the datalist won't scroll. So, I built a utility class for use in a few places.

To use it, create the listFilter and initialize it with your list of choices. Then hook up keyUp and keyPress and use the return values. The class uses a 2-second time out and actually filters the answers. Using the delete key, you can clear the filtering. Be sure to check for a null return value in the keyUp, since that only handles the delete key. Note that the dropdown must be unexpanded for you to get the key events to work.

var listFilter = {
originalListToHold: [],
time1: 1,
search: "",

initialize: function(originalListToCopy) {
    this.originalListToHold = [];
    for (var i = 0; i < originalListToCopy.length; i++) {
        this.originalListToHold[i] = originalListToCopy[i];
    }
},

isInOriginalList: function(member) {
    return this.originalListToHold.indexOf(member) > 1;
},

keyUpEvent: function(event) {
    var keyCode = event.keyCode;
    if (keyCode == 46) {
        var filtered = this.filterList("");
        this.search = "";
        event.stopPropagation();
        return filtered;
    } else {
        return null;
    }
},

keyPressEvent: function(event) {
    //The delete key will reset the list. See the key up event above.
    var val = String.fromCharCode(event.which).toUpperCase();
    var timenow = event.timeStamp;
    var timeDiff = timenow - this.time1;
    if (!isNaN(timeDiff)) {
        //If the time difference is < 2 seconds (2000 ms), then we
        //will search the options.
        if (timeDiff > 2000) {
            //Reset the search string
            this.search = "" + val;
        } else {
            this.search = this.search + val;
        }
    } else {
        this.search = "" + val;
    }
    this.time1 = timenow;
    //Now, let's filter the options by the search string.
    var filtered = this.filterList(this.search);
    event.stopPropagation();
    return filtered;
},

filterList: function(filter) {
    var newList = [];
    for (var i = 0; i < this.originalListToHold.length; i++) {
        if (this.originalListToHold[i].indexOf(filter) > -1) {
            newList.push(this.originalListToHold[i]);
        }
    }
    return newList;
}

}


Post a Comment for "Html Select Keystroke Timeout"