An open API service indexing awesome lists of open source software.

https://github.com/digitaledgeit/js-autosuggest

An auto suggest input.
https://github.com/digitaledgeit/js-autosuggest

Last synced: 6 months ago
JSON representation

An auto suggest input.

Awesome Lists containing this project

README

          

# autosuggest

An auto suggest input.

## Installation

component install digitaledgeit/js-autosuggest

## Setup

var presenter = require('autosuggest')({
el: document.querySelector('.js-autosuggest'),
source: matcher(countries, {properties: ['name'], limit: 6, ignore_case: true}),
display: 'name',
template: function(query, country) {
return '

'+country.code+'
'+country.name+'
';
},
minLength: 1,
hideDropDownIfEmpty: true,
listItemClasses: 'country'
});

## API

### new Autosuggest(options : object)

#### Options

- `hint` -
- `highlight` -
- `minlength` - The minimum number of characters the user must enter before any suggestions are fetched.
- `canSuggest` - A function that determines whether a suggestion should be made for the query

- `source` - A suggestion source - an array of suggestions, a `function(query : string)` that returns an array of suggestions or a `function(query : string, done : function(suggestions : array))` that calls the `done` method.
- `display` -
- `template` -

- selectItemWhenTabPressed - Select items when the user presses tab and an item in the drop down list is selected (using the arrow keys)

### .open()

Open the dropdown menu.

### .close()

Close the dropdown menu.

### .getValue()

Get the current input value.

### .setValue(value)

Set the current input value.

### .focus()

Focus the input element.

## Events

- `opened` - Triggered when the dropdown menu is opened.
- `closed` - Triggered when the dropdown menu is closed.
- `suggested` - Triggered when a suggestion is displayed in a dropdown. Passed the suggestion objects.
- `selected` - Triggered when a suggestion is selected from the dropdown. Passed the suggestion object.

- `blur` - Triggered
- `change` -

## Matcher

## Example

1. Run `component build --dev`
2. Open `test\example\countries.html`

## Test

1. Run `component build --dev`
2. Run `component test phantom`

## Troubleshooting

*Note*: Requires the following shims for IE8:

- bind
- classList
- indexOf
- event.preventDefault