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
(999) 999-9999
(999) 999-9999 / x99999
+39 999 999 999
Input formatter
(999) 999 - 9999
(999) 999-9999 / a999
+39 999 999 999
99 - 9999999
999 - 99 - 9999
9999 - 9999 - 9999 - 9999
a* - 999 - a999
aaa - 999 - ***
999 - 99 - 999 - 9999 - 9
+3 (999) 999-99-99
Password generator
Checker inside label

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

Label inside input

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

Label inside addon

In this example password checker appears as input-group-addon. Note: addon must have any text or icon since group addon has table layout.

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 label appears when the remaining chars are 15 or less.

Custom options

Example with custom options. All options can be mixed: here label will show up after entering 10 characters, label 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.

Form actions Action button positioning
Left actions
Centered actions
Right actions