Default

With Tooltip

Input With Range

Basic Usage

Create a basic select2 by using data-plugin="select2".

Multi-Value

Add multipleto create a multi select2.

Placeholders

You can define placeholder easily by using data-placeholder="Select a State"

Minimum input

Custom Search, texts input with min length by using data-minimum-input-length="2"

Disabled

Use disabledto set disabled state. data-minimum-input-length="2"

Basic Tags

Just add data-role="tagsinput"to your input field to automatically change it to a tags input field.

True Multi Value

Use a <select multiple />as your input element for a tags input, to gain true multivalue support. Instead of a comma separated string, the values will be set in an array. Existing <option />elements will automatically be set as tags. This makes it also possible to create tags containing a comma.

Input group Tags

You can also use group tag data-role="tagsinput"to your input field.

Basic multiselect

Use a select multipleas your input element.

Public Methods

Use a select multipleas your input element.

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 (Suggestion Engine)

Suggestion 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.

Prefetch

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.

Default Suggestions

Default suggestions can be shown for empty queries by setting the minLength option to 0 and having the source return suggestions for empty queries..

Multiple Datasets

Use multiple datasets like this

Scrollable Dropdown Menu

You can use scrollable drowdown

Input

max-lengthset to 35.

Text-Area

max-lengthset to 100.

With Postfix

With Prefix

Vertical Button

Custom Icons

Default

Use data-plugin="clockpicker"create it.

Auto Close

Add data-autoclose="true"to open the autoclose.

Basic

Use data-plugin="timepicker"create a basic timepicker.

Duration

Adding data-min-time, data-max-time, data-show-duration="true"to set the duration.

Set Current time

You can set current time.

Basic Datepicker

Add data-plugin="datepicker"to create a default datepicker. use data-multidate="true"to selecting multi dates.

Date Range

Set name="start"and name="end"for date

SetInline

You also can set the datepicker to be inline and flat.