Skip to content

Latest commit

 

History

History
73 lines (45 loc) · 3.43 KB

docs.md

File metadata and controls

73 lines (45 loc) · 3.43 KB
Raw

meteor-typeahead

The typeahead.js plugin to make your inputs with autocomplete support packaged for meteor applications.

Table of Contents

Features

  • Support fetching meteor collections as typeahead dataset
  • Easy to bind auto-complete suggestions to input using data-source attribute
  • Allow using meteor template to visualize auto-complete suggestion
  • Support most typeahead.js use cases:
    • Asynchronous data sources
    • Prefetched JSON data source
    • Multiple datasets

Usage

API

Meteor.typeahead(element, source)

Turns given HTML <input[type="text"]/> into a typeahead.

  • element - is HTML input element.
  • source - is optional custom data source function with function(query, sync, async) signature where query is text entered in the input and sync, async are callback functions expecting suggestions argument to show in dropdown.

Meteor.typeahead.inject(selector)

Activates typeahead behavior for all elements matched by given CSS selector. selector parameter defaults to '.typeahead'.

Datasets

typeahead.js dataset(s) is specified as data attribute if you don't specify custom data source function in Meteor.typeahead call.

  • data-source - name of function defined as helper for your meteor template with typeahead input. Optionally you could specify collection.property to automatically bind given meteor collection to your typeahead input

  • data-sources - name of template helper function that returns array of typeahead datasets. data-sets is alias. Demo application has an example.

Options

typeahead.js options are specified as data attributes in your input element. List of supported attributes:

  • data-highlight – If true, when suggestions are rendered, pattern matches for the current query in text nodes will be wrapped in a strong element with tt-highlight class. Defaults to false.

  • data-hint – If false, the typeahead will not show a hint. Defaults to true.

  • data-min-length – The minimum character length needed before suggestions start getting rendered. Defaults to 1.

  • data-autoselect – If true, the typeahead will select the first option when press enter key. Defaults to false.

  • data-value-key - If the data-source returns objects, this can be used to set which attribute to use for the search text. If this is not specified, then it is assumed that each object will have an attribute named value that contains the search text.

Events

Using data attributes you could specify handlers for corresponding typeahead opened, closed, selected, autocompleted events. Value of data attribute is name of template helper function to be used as event handler.

  • data-open - specifies handler for for typeahead:open event
  • data-close - specifies handler for for typeahead:close event
  • data-select - specifies handler for for typeahead:select event
  • data-autocomplete - specifies handler for for typeahead:autocomplete event

See also typeahead docs for custom events.