Candy canes bonbon toffee. Cheesecake dragée gummi bears chupa chups powder bonbon. Apple pie cookie sweet.
Email
Chat
Todo
Kanban
Contacts
Invoice
Lorem ipsum dolor sit amet, consectetuer elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.
I like your portfolio, let's start.
I have seen your work, there is
Can we have call in this week ?
We have project party this saturday.
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.
typeahead
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. This requires Handlebars.js extension for compilation.
Handlebars.js
Default suggestions can be shown for empty queries by setting the minLength option to 0 and having the source return suggestions for empty queries.
minLength
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. Bloodhound is stack, flexible, and offers advanced functionalities such as prefetching, intelligent caching, fast lookups, and backfilling with remote data.
Bloodhound
typeahead.js
Multiple datasets give you visually separated sets of data inside Dropdown menu with saperate titles, managed in templates option. This looks like a <optgroup> titles in selects.
saperate titles
templates
<optgroup>
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.
div
custom css
Typeahead supports RTL also. 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.
RTL
text-align: right;
Default threshold value is 10. The badge will show up right below the input after entering 10 or more chars. This is default value and position for threshold.
threshold
Use the threshold option to show up badge when there are 15 chars or less
if alwaysShow: true the threshold will be ignored and the remaining length indication will be always showing up while typing or on focus on the input.
alwaysShow: true
warningClass is the class of the element with the indicator. By default is badge badge-success but can be changed to anything you'd like.
warningClass
badge badge-success
limitReachedClass is the class the element gets when the limit is reached. By default is badge badge-important badge-danger but can be changed to anything you'd like.
limitReachedClass
badge badge-important badge-danger
Some attributes are used to change badge format. Attributes : separator,preText,postText,andvalidate.
separator
preText
postText
validate
The field counter can be positioned at the top, bottom, left or right. All you need to do is specify the placement option, with one of those strings. If none is specified, the positioning will be defauted to 'bottom'.
top
You can also place the maxlength indicator on the corners: bottom-right, top-right, top-left and bottom-left.
top-left
You can also place the maxlength indicator inside the input: centered-right.
centered-right
Bootstrap maxlength supports textarea as well as inputs.
Customize & Preview in Real Time