A configurable, super simple and extremely fast typeahead solution for `<select>` elements.
MIT License
A configurable, super simple and extremely fast typeahead solution for <select>
elements.
Features:
strøm
is the same as strom
)Demo: https://andersevenrud.github.io/projects/select-typeahead/examples/index.html
{String|Node} el The <SELECT> to use
{Object} [opts] Options
{Object} [opts.data] A key/value paired object instead of select data
{Function} [opts.fnDataFilter] A function that filters the dropdown values
{Function} [opts.fnInputFilter] A function that filters the input value
{Function} [opts.fnMatch] A function that performs A->B matching
{Number} [opts.keyTimeout=100] A timeout for key presses
{String} [opts.buttonLabel='>'] A label for the button
{Array|String} [opts.className] A className to give the instance (or array)
{Boolean} [opts.calcWidth=true] Set the width of the widget
{Boolean} [opts.autoSelect=false] Automatically select the "best" result
{String} [opts.placeholder=true] Placeholder string (or true for autodetect)
// Create with vanilla
SelectTypeahead(el, {});
// Create with jQuery
$('el').SelectTypeahead({});
// Methods:
.setSelectedIndex(idx)
.setSelectedValue(val)
.getSelectedIndex()
.getSelectedValue()
.focus()
.blur()
.destroy()
// Options:
fnDataFilter: function(str) {
return str;
}
fnInputFilter: function(str) {
return str;
}
fnMatch: function(input, entry) {
return entry.indexOf(input) !== -1;
}
Use the included files in dist/
.
Available via npm.