defunctzombie/typeahead

bootstrap compatible typeahead web component

typeahead

typeahead widget

use

var Typeahead = require('typeahead');

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

// source is an array of items
var ta = Typeahead(input, {
    source: ['foo', 'bar', 'baz']
});

input // =>

To get the default style you also have to include style.css.

options

source

array of values or function(query, result). Call result with array of return values.

var Typeahead = require('typeahead');
var input = document.createElement('input');

// source is an array of items
var ta = Typeahead(input, {
    source: function(query, result) {
        result(['foo', 'bar', 'baz']);
    }
});

input // =>

position

location of the drop down menu. Valid values are above, below and right. default is below

autoselect

Automatically select first item in drop down menu. Valid values are true, false. Default is true.

style

Custom styling can be applied for the following rules.

.typeahead

To style the list of suggestions.

.typeahead.hidden

To style the hidden state of the menu

.typeahead li

To style a li container.

.typeahead a

To style the actual item text and selection area.

.typeahead .active > a

To style the appearance of a selected item.

License

The current code is fork of the bootstrap typeahead component and is licensed under Apache License, Version 2.0

typeahead's Issues

version without dependencies

I've forked typeahead and edited it to remove the dependencies. This changes the API a little - options.menu and options.item must now be passed as tag names, as opposed to HTML strings, e.g.:

new Typeahead(input, {
    menu: 'div',
    item: 'span'
});

Additionally, I changed the match handler a bit in order to accept objects as matches (as long as they have a value key). The other keys are added to the match item's dataset, then copied to the input upon selection. This makes then available for the event handler. For instance, the matches might be locations; the name is shown on screen, and the lat/long can be handled upon select:

new Typeahead(input, {
    source: function(query, callback) {
       callback([
         {value: 'some city', lat: 42, lng: -72},
         {value: 'some other', lat: -42, lng: 84}
       ])
   }
});

I also found that the change event wasn't working, it fires even when a final selection hasn't been made, so I've namespaced it to change.typeahead.

Would you be interested in a pull with these changes?

"typeahead:selected" and other custom events appear to be missing

With the jQuery version of this plugin, you can enable custom events with

$('input').typeahead(...).on('typeahead:selected', customHandler);

However, there appears to be no way to do this with the version on NPM when you initiate with

var input = $('input')
Typeahead(input, ...)

DEPENDENCIES GO IN PACKAGE.JSON

Deprecate maybe?

Deprecate this npm package and archive this unmaintained repo in favor of native datalist?
Native controls are much better IMO, works awesome on mobile too.

IE's is dead anyway