User suggestion autocomplete / dropdown widget
JavaScript
Switch branches/tags
Nothing to show
Clone or download
rroppolo Update demo.html
fix missing resources
Latest commit decfce6 Dec 20, 2013

README.md

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