#### Forms - Extended Controls

Statistics Invoices Schedule

##### Twitter typeahead

###### Basic usage

When initializing a typeahead, you pass the plugin method one or more datasets. The source of a dataset is responsible for computing a set of suggestions for a given query.

###### Bloodhound engine

For more advanced use cases, rather than implementing the source for your dataset yourself, you can take advantage of `Bloodhound`, the `typeahead.js` suggestion engine.

###### Prefetched data

Prefetched data is fetched and processed on initialization. If the browser supports local storage, the processed data will be cached there to prevent additional network requests on subsequent page loads.

###### Remote data

Remote data is only used when the data provided by local and prefetch is insufficient. In order to prevent an obscene number of requests being made to the remote endpoint, requests are rate-limited.

###### Custom templates

Custom templates give you full control over how suggestions get rendered making it easy to customize the look and feel of your typeahead. Requires `Handlebars.js` extension for compilation.

###### Multiple datasets

Multiple datasets give you visually separated sets of data inside Dropdown menu with custom titles, managed in `templates` option. This looks like a `<optgroup>` titles in selects.

###### Dropdown height

To change the height of your dropdown menu, just wrap your input in some div with custom css styles and change necessary css properties or change it in css directly.

###### RTL support

Twitter Typeahead supports `RTL` direction. Wrap your input in any div with `text-align: right;` property and add `dir="rtl"` to your input, now your dropdown menu is right aligned.

##### Elastic textarea

###### Basic example

Drop Autosize into any existing website and it should Just Work™. The source is short and well commented if you are curious to how it works.

###### Manual triggering

When the value of a textarea has been changed through JavaScript, trigger the `autosize.resize` event immediately after to update the height.

###### Removing autosize

Trigger the `autosize.destroy` event to remove autosize from a textarea element. Once `destroy` button clicked, autosize will be removed.

##### Masked inputs

Date: 99/99/9999
Phone: (999) 999-9999
Phone + Ext: (999) 999-9999 / x99999
Currency: $999
International format: +39 999 999 999
Tax ID: 99-9999999
SSN: 999-99-9999
Credit card: 9999-9999-9999-9999
Product key: a*-999-a999
Purchase order: aaa-999-***
Percentage: 99%
ISBN: 999-99-999-9999-9

##### Input formatter

Date: 99/99/9999
Phone number: (999) 999 - 9999
Phone + Ext: (999) 999-9999 / a999
Currency: $999.99
International format: +39 999 999 999
Tax ID: 99 - 9999999
SSN: 999 - 99 - 9999
Credit card: 9999 - 9999 - 9999 - 9999
Product key: a* - 999 - a999
Order number: aaa - 999 - ***
ISBN: 999 - 99 - 999 - 9999 - 9
Visible formatted characters: +3 (999) 999-99-99

##### Password generator

###### Checker inside badge

Password checker is attached to the badge, which appears below the input field. Empty badge is hidden, if you add any text inside badge, it'll stay visible.

###### Label inside input

Rules are the same as for password checker inside badge, but this one has absolute position and placed inside `form-group`. Empty badge is also hidden.

###### Label inside addon

In this example password checker appears as input group `text addon`. Can be left and/or right aligned, supports all input group styles. Styles can be adjusted in JS config.

No password

##### Bootstrap maxlength

###### Basic example

Basic example of maxlength plugin. The badge will show up right below the input by default when the remaining chars are 10 or less. This is a default value and position.

###### Label position

The field counter can be positioned at the top, bottom, left or right via `placement` option. You can also place the maxlength indicator on the corners: bottom-right, top-right, top-left, bottom-left and centered-right.

###### Full featured

This is a complete example where all the options configured for the bootstrap-maxlength counter are setted. Please note: if the `alwaysShow` option is enabled, the `threshold` option is ignored.

###### Change the threshold value

Do you want the badge to show up when there are 20 chars or less? Use the `threshold` option. In this example badge appears when the remaining chars are `15` or less.

###### Custom options

Example with custom options. All options can be mixed: here badge will show up after entering 10 characters, badge has different color and shows up after the limit is reached.

###### Textarea example

Bootstrap maxlength supports textarea as well as inputs. Even on old IE. Maxlength, attached to the textarea supports all available options and settings by default.