https://github.com/tristen/suggestions

A typeahead component for inputs
https://github.com/tristen/suggestions

Last synced: about 12 hours ago
JSON representation

A typeahead component for inputs

• Host: GitHub
• URL: https://github.com/tristen/suggestions
• Owner: tristen
• License: isc
• Created: 2015-10-28T15:24:44.000Z (about 9 years ago)
• Default Branch: gh-pages
• Last Pushed: 2023-08-04T18:47:19.000Z (over 1 year ago)
• Last Synced: 2024-06-11T17:12:26.727Z (7 months ago)
• Language: JavaScript
• Homepage: https://tristen.ca/suggestions/demo/
• Size: 1.1 MB
• Stars: 44
• Watchers: 4
• Forks: 19
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Suggestions

---

A typeahead component for inputs

[![npm version](http://img.shields.io/npm/v/suggestions.svg)](https://npmjs.org/package/suggestions) [![Circle CI](https://circleci.com/gh/tristen/suggestions/tree/gh-pages.svg?style=svg)](https://circleci.com/gh/tristen/suggestions/tree/gh-pages)

[__Demo__](http://tristen.ca/suggestions/demo/)

### Usage

#### Quick start

``` html

  var input = document.querySelector('input');

  var data = ['foo', 'bar', 'baz', 'qux'];

  new Suggestions(input, data);

```

#### Usage with Browserify

```js

var Suggestions = require('suggestions');

var input = document.querySelector('input');

var data = ['foo', 'bar', 'baz', 'qux'];

new Suggestions(input, data);

```

#### Suggestions with options

```js

var Suggestions = require('suggestions');

var input = document.querySelector('input');

var data = [{

  name: 'Roy Eldridge',

  year: 1911

}, {

  name: 'Roy Hargrove',

  year: 1969

}, {

  name: 'Tim Hagans',

  year: 1954

}, {

  name: 'Tom Harrell',

  year: 1946

}, {

  name: 'Freddie Hubbard',

  year: 1938

}, {

  name: 'Nicholas Payton',

  year: 1973

}, {

  name: 'Miles Davis',

  year: 1926

}, {

  name: 'Dizzy Gillespie',

  year: 1917

}, {

  name: 'Rex Stewart',

  year: 1907

}];

var typeahead = new Suggestions(input, data, {

  minLength: 3, // Number of characters typed into an input to trigger suggestions.

  limit: 3 //  Max number of results to display. 

});

typeahead.getItemValue = function(item) {

  return item.name

};

input.addEventListener('change', function() {

  console.log(typeahead.selected); // Current selected item.

});

```

### [`API`](https://github.com/tristen/suggestions/blob/gh-pages/API.md)

### Running locally

    npm install && npm start

`npm start` will run a server on port 9966. Visit http://localhost:9966/demo/

to view the example.

### Testing

    npm run test

### Credit

This project is adapted from https://github.com/marcojetson/type-ahead.js