type-ahead.js

A lightweight and extensible type ahead library. Browserify compatible.

Demo

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

Install

Browserify via NPM

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

npm install type-ahead

Once installed, include the library using require:

var TypeAhead = require('type-ahead')

Manually

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

<script type="text/javascript" src="type-ahead.js"></script>

Usage

Simple usage

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

AJAX

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

Min length and limit

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

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

Use objects instead of strings

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

Fulltext Search

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:

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

Dynamically update list

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

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

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

Callback

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:

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.

v2.1.0 - 13-10-2015

Type	Link	Description
Added	#13	Fulltext Searching

v2.0.0 - 09-09-2015

Type	Link	Description
Changed	#11 (comment)	Callback API. Now uses opts.onMouseDown and opts.onKeyDown

v1.1.0 - 01-09-2015

Type	Link	Description
Added	#5	Callback option. Now uses opts.callback

v1.0.0 - 01-09-2015

Type	Link	Description
N/A	#3	Initial NPM release