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
Input formatter
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.
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.