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

<labelfor="poison">Choose your poison</label><inputid="poison"name="poison"list="poisons" /><datalistid="poisons"><optionvalue="Cider"selected>Apple Cider</option><optionvalue="Juice">Apple Juice</option><optionvalue="Curacao">Curacao</option><optionvalue="Jack">Jack's Hard Cider</option><optionvalue="Jake">Jake's Hard Cider</option><optionvalue="James">James' Hard Cider</option><optionvalue="Jamison">Jamison Irish Whiskey</option><optionvalue="Kool">Kool Ade</option><optionvalue="Lemonade">Lemonade</option><optionvalue="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) {
    returnthis.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 {
        returnnull;
    }
},

keyPressEvent: function(event) {
    //The delete key will reset the list. See the key up event above.varval = 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 stringthis.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;
}

}