A configurable, super simple and extremely fast typeahead solution for `<select>` elements.
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
example
.editorconfig
.eslintrc
LICENSE
README.md
package.json
select-typeahead.css
select-typeahead.js
webpack.config.js

README.md

select-typeahead

A configurable, super simple and extremely fast typeahead solution for <select> elements.

Features:

  • Configurable
  • Extremely fast
  • Normalizes strings so you don't have to query with special characters (ex: strøm is the same as strom)
  • Works with form tab-ing
  • Written for IE9+
  • Vanilla JS

Demo: https://andersevenrud.github.io/projects/select-typeahead/examples/index.html

Options:

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

Usage:

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

Installation

Use the included files in dist/.

Available via npm.

Changelog

  • 0.8.0 - Now bundled
  • 0.7.3 - Added 'tabSelect' option
  • 0.7.2 - Added '_update' event for refreshing current selection
  • 0.7.1 - If using placeholder ignore empty default value
  • 0.7.0 - Updated some external triggers
  • 0.6.9 - Added 'selected' event and 'setSelectedIndex' trigger
  • 0.6.8 - Added placeholder support
  • 0.6.7 - Fixed usage with string values/keys
  • 0.6.6 - Updated locale scrubbing
  • 0.6.5 - Cleanup of scoring in most significant behaviour
  • 0.6.4 - Changed behaviour in most significant selector
  • 0.6.3 - Better matching of multiple words
  • 0.6.2 - Prevent raising error on backspace when input is empty
  • 0.6.1 - Better autoSelect
  • 0.6.0 - Added blocking of autocomplete etc.
  • 0.5.9 - Added autoSelect parameter
  • 0.5.8 - Better scrollIntoView behaviour
  • 0.5.7 - Fixed filter not working when no initial value is selected
  • 0.5.6 - Close dropdown when open and click button
  • 0.5.5 - Updated removeLocale() and CSS
  • 0.5.4 - Bugfixes
  • 0.5.3 - Bugfixes
  • 0.5.2 - Added module export support
  • 0.5.1 - Fixed normalized text showing up in input
  • 0.5.0 - Initial release