User suggestion autocomplete / dropdown widget
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
js Element data values should be retrieved with .data('...') rather than… Apr 11, 2013

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

Live Demo

View the live demo


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


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" />


  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