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.
For more advanced use cases, rather than implementing the source for your dataset yourself, you can take advantage of
typeahead.js suggestion engine.
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 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 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 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.
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.
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.
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.
autosize.resize event immediately after to update the height.
autosize.destroy event to remove autosize from a textarea element. Once
destroy button clicked, autosize will be removed.
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.
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.
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.
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.
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.
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.