Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andersevenrud/select-typeahead
A configurable, super simple and extremely fast typeahead solution for `<select>` elements.
https://github.com/andersevenrud/select-typeahead
combobox dropdown html javascript select typeahead widget
Last synced: 3 months ago
JSON representation
A configurable, super simple and extremely fast typeahead solution for `<select>` elements.
- Host: GitHub
- URL: https://github.com/andersevenrud/select-typeahead
- Owner: andersevenrud
- License: mit
- Created: 2017-02-23T10:44:31.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-08T18:45:51.000Z (about 7 years ago)
- Last Synced: 2024-10-03T23:33:42.620Z (3 months ago)
- Topics: combobox, dropdown, html, javascript, select, typeahead, widget
- Language: JavaScript
- Size: 52.7 KB
- Stars: 5
- Watchers: 3
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# select-typeahead
A configurable, super simple and extremely fast typeahead solution for `` 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 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:
```javascript
// 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](https://www.npmjs.com/package/select-typeahead).
## 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