type-ahead.js

A lightweight and extensible type ahead library. Browserify compatible.

Demo

Check out http://marcojetson.github.io/type-ahead.js/

Install

$3

To use type-ahead with Browserify, install it into your project via npm:

``bash
npm install type-ahead
`

Once installed, include the library using require:

`javascript
var TypeAhead = require('type-ahead')
`

$3

You can also include the standalone library by downloading it here (or minified), and including it in your HTML page:

`html

`

Usage

$3

`javascript
new TypeAhead(document.getElementById('my-control'), [
'Asia', 'Africa', 'Europe', 'North America', 'South America', 'Oceania'
]);
`




$3

`javascript
var t = new TypeAhead(document.getElementById('my-control'));

t.getCandidates = function (callback) {
$.getJSON('/suggest?q=' + this.query, function () {
callback(response);
});
};
`

Example is using jQuery for simplicity




$3

`javascript
var opts = {
minLength: 1,
limit:false
}

var t = new TypeAhead(document.getElementById('my-control'), [
'Asia', 'Africa', 'Europe', 'North America', 'South America', 'Oceania'
], opts);
`

$3

`javascript
var t = new TypeAhead(document.getElementById('my-control'), [
{name: 'Asia'},
{name: 'Africa'},
{name: 'Europe'},
{name: 'North America'},
{name: 'South America'},
{name: 'Oceania'}
]);

t.getItemValue = function (item) {
return item.name;
};
`

$3

type-ahead by default searches for the desired string at index 0 of each string in your search list. To enable full-text search, or the desired string at any index, enable the fulltext flag in the options:

`javascript
var opts = {
fulltext:true
};
var t = new TypeAhead(document.getElementById('my-control'), [
'Asia', 'Africa', 'Europe', 'North America', 'South America', 'Oceania'
], opts);
`

$3


Once you've created the TypeAhead instance, you can update the items in the autocomplete list via:

`javascript
var t = new TypeAhead(document.getElementById('my-control'), [
'Asia', 'Africa', 'Europe', 'North America', 'South America', 'Oceania'
]);

t.update([
'Asia', 'Europe', 'South America', 'Oceania'
])
`

$3

If you want to run code after autocomplete updates the input (e.g. to update a model), simply add a callback function into the opts parameter:

`javascript
var opts = {
callback:function(newValue){
console.log(newValue);
// Do code here
}
};

var t = new TypeAhead(document.getElementById('my-control'), [
'Asia', 'Africa', 'Europe', 'North America', 'South America', 'Oceania'
], opts);
`

Contributing

Found an issue? Have a feature request? Open a [Github Issue]() and/or [fork this repo]().

License

Changelog

All notable changes to this project will be documented in this file.

This project adheres to Semantic Versioning and Keep A Changelog.

$3

| Type | Link | Description |
| ---- | ---- | ----------- |
| Added | https://github.com/marcojetson/type-ahead.js/pull/13 | Fulltext Searching |

$3

| Type | Link | Description |
| ---- | ---- | ----------- |
| Changed | https://github.com/marcojetson/type-ahead.js/pull/11#issuecomment-138800307 | Callback API. Now uses opts.onMouseDown and opts.onKeyDown |

$3

| Type | Link | Description |
| ---- | ---- | ----------- |
| Added | https://github.com/marcojetson/type-ahead.js/issues/5 | Callback option. Now uses opts.callback` |

$3

| Type | Link | Description |
| ---- | ---- | ----------- |
| N/A | https://github.com/marcojetson/type-ahead.js/issues/3 | Initial NPM release |