Bootstrap Multi-Suggest Typeahead

Extends the default Bootstrap Typeahead component to support:

• multiple datasources
• data from Backbone.js Collections, RESTful services (AJAX/JSON), and static arrays
• dynamic filtering
• custom, per-datasource list formatters
• separate visible & hidden select values
• minimum number of characters before a search is performed

Brought to you by the friendly folks at ACT.md

Live Demo

View the live demo

Installation

1. Include multisuggest-plugin.js
2. Include multisuggest-plugin.css
3. Enable the multi-suggest typeahead on any text input:

$('input.foo').multisuggest(options);

Options

The plugin accepts options as single object argument. Supported options are:

• sources: an array of data sources
  • type: one of 'backbone.collection', 'url', or 'array'
  • data: either the Backbone Collection object, URL string, or Array object
  • filter: function to filter the data by a search query term and return the filtered data (for Collections and Arrays)
  • listFormatter: function to format the items into HTML as they will appear in the dropdown, e.g. function(item, term) { ... }
  • inputFormatter: function to format the items into text as they will appear in the input field when selected, e.g. function(item) { ... }
  • valueAttribute: function which takes an item from the data set and returns the 'value' to be submitted (stored in a hidden input field), e.g. function(item) { ... }
  • headher: String of text to appear as the heading of the data source in the menu of results
  • queryParam: When using the url type, this field indicates the query parameter used to pass the search string
  • resultsProcessor: When using the url type, a function to process the JSON results returned by the AJAX request, e.g. function(data) { ... }
  • maxEntries: optional maximum number of results to show for this data source
• link: optional link HTML to show at the bottom of the menu, e.g. <a tabFocus="0" href="javascript:void(0);">Enter new item...</a>
• linkHandler: listner function that is invoked when the link is selected
• loadingIconClass: CSS class for the loading icon, which is displayed during url-type AJAX requests
• noResultsText: custom text to display when no search results are found
• enableDropdownMode: boolean parameter indicating whether the input can be expanded as a standard dropdown in addition to the typeahead functionality. Dropdown mode will render only static data sources.
• delay: optional number of milliseconds to delay typeahead searches
• minLength: optional minimum number of characters needed before performing a typeahead search

See the live demo for fully qualified examples.

Default Value

The plugin accepts a default value from the text input through the value and data-value attributes.

• value: the display value, displayed as the selected item in the input field
• data-value: the real value to be submitted

<input id="multiSuggestTest" value="John Smith" data-value="36c86e9d72c14d2aa582d2fb95e66c1c" />

Contributing

1. Fork the repository
2. Create your feature branch, git checkout -b my-feature
3. Commit your changes, git commit -am 'Description of my new feature'
4. Push to the branch, git push origin my-feature
5. Create a new pull request