We have used different plugins like Bootstrap Select, Select2, Tagify for Select & Tags and we have also added Typeahead plugin for easy suggestions.
Read the official Select2, Tagify, Bootstrap Select and Typeahead Documentations for a full list of instructions and other options.
Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
Usage
In order to use Select2 on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:
<link rel="stylesheet" href="assets/vendor/libs/select2/select2.css " />
Include the following vendors script in the "Vendors JS" area from the page's footer:
<script src="assets/vendor/libs/select2/select2.js"></script>
Basic
To create a basic select2 initialize your select component with select2 like this: YOUR_ELEMENT.select2()
.
<div class="mb-3">
<label for="select2Basic" class="form-label">Basic</label>
<select id="select2Basic" class="select2 form-select form-select-lg" data-allow-clear="true">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</select>
</div>
$(".select2").select2();
Multiple
Use multiple
attribute with select tag to create a select2 with multiple values.
<div class="mb-3">
<label for="select2Multiple" class="form-label">Multiple</label>
<select id="select2Multiple" class="select2 form-select" multiple>
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO" selected>Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL" selected>Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>
</div>
$(".select2").select2();
Disabled
Use disabled
attribute with select tag to create a disabled select2.
<div class="mb-3">
<label for="select2Disabled" class="form-label">Disabled</label>
<select id="select2Disabled" class="select2 form-select" disabled>
<option value="1">Option1</option>
<option value="2" selected>Option2</option>
<option value="3">Option3</option>
<option value="4">Option4</option>
</select>
</div>
$(".select2").select2();
Icons
You can use selet2's templating options to create a select2 with icons—refer below mentioned example.
<div class="mb-3">
<label for="select2Icons" class="form-label">Icons</label>
<select id="select2Icons" class="select2-icons form-select">
<optgroup label="Services">
<option value="wordpress2" data-icon="bx bxl-wordpress" selected>WordPress</option>
<option value="codepen" data-icon="bx bxl-codepen">Codepen</option>
<option value="drupal" data-icon="bx bxl-drupal">Drupal</option>
<option value="pinterest2" data-icon="bx bxl-css3">CSS3</option>
<option value="html5" data-icon="bx bxl-html5">HTML5</option>
</optgroup>
<optgroup label="File types">
<option value="pdf" data-icon="bx bxs-file-pdf">PDF</option>
<option value="word" data-icon="bx bxs-file-doc">Word</option>
<option value="excel" data-icon="bx bxs-file-json">JSON</option>
<option value="facebook" data-icon="bx bxl-facebook">Facebook</option>
</optgroup>
<optgroup label="Browsers">
<option value="chrome" data-icon="bx bxl-chrome">Chrome</option>
<option value="firefox" data-icon="bx bxl-firefox">Firefox</option>
<option value="safari" data-icon="bx bxl-edge">Edge</option>
<option value="opera" data-icon="bx bxl-opera">Opera</option>
<option value="IE" data-icon="bx bxl-internet-explorer">IE</option>
</optgroup>
</select>
</div>
// custom template to render icons
function renderIcons(option) {
if (!option.id) {
return option.text;
}
var $icon = "<i class='bx bxl-" + $(option.element).data("icon") + " me-2'></i>" + option.text;
return $icon
}
// Init select2
$(".select2-icons").wrap('<div class="position-relative"></div>').select2({
dropdownParent: select2Icons.parent(),
templateResult: renderIcons,
templateSelection: renderIcons,
escapeMarkup: function(es) {
return es;
}
});
Colors
Wrap your select with class select2-{color}
to create a colored select2. Refer below mentioned table for color options.
<div class="mb-3">
<label for="select2Primary" class="form-label">Primary</label>
<div class="select2-primary">
<select id="select2Primary" class="select2 form-select" multiple>
<option value="1" selected>Option1</option>
<option value="2" selected>Option2</option>
<option value="3">Option3</option>
<option value="4">Option4</option>
</select>
</div>
</div>
$(".select2").select2();
Class | Value |
---|---|
class="select2-{value}"
|
primary | secondary | success | danger | warning | info | light | dark |
Lightweight, efficient Tags input component in Vanilla JS. Refer the offical library demo page for more options: https://yaireo.github.io/tagify/
Usage
In order to use Tagify on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:
<link rel="stylesheet" href="assets/vendor/libs/tagify/tagify.css " />
Include the following vendors script in the "Vendors JS" area from the page's footer:
<script src="assets/vendor/libs/tagify/tagify.js"></script>
Basic
To create a basic tagify input by initialize tagify like this: new Tagify(YOUR_ELEment);
.
<div class="mb-3">
<label for="TagifyBasic" class="form-label">Basic</label>
<input id="TagifyBasic" class="form-control" name="TagifyBasic" value="Tag1, Tag2, Tag3" />
</div>
const tagifyBasicEl = document.querySelector("#TagifyBasic");
const TagifyBasic = new Tagify(tagifyBasicEl);
Readonly
Use readonly
attribute with input and initialize it to create a readonly tagify.
<div class="mb-3">
<label for="TagifyReadonly" class="form-label">Readonly</label>
<input id="TagifyReadonly" class="form-control" readonly value="Tag1, Tag2, Tag3" />
</div>
const tagifyReadonlyEl = document.querySelector("#TagifyReadonly");
const TagifyReadonly = new Tagify(tagifyReadonlyEl);
Custom Suggestions: Inline
Create inline tags input with multiple selection.
<div class="mb-3">
<label for="TagifyCustomInlineSuggestion" class="form-label">Custom Inline Suggestions</label>
<input id="TagifyCustomInlineSuggestion" name="TagifyCustomInlineSuggestion" class="form-control" placeholder="select technologies" value="css, html, javascript">
</div>
const TagifyCustomInlineSuggestionEl = document.querySelector("#TagifyCustomInlineSuggestion");
const whitelist = [
"A# .NET",
"A# (Axiom)",
"A-0 System",
"A+",
"A++",
"ABAP",
"ABC",
"ABC ALGOL",
"ABSET",
"ABSYS",
"ACC",
"Accent",
"Ace DASL",
"ACL2",
"Avicsoft",
"ACT-III",
"Action!",
"ActionScript",
"Ada",
"Adenine",
"Agda",
"Agilent VEE",
"Agora",
"AIMMS",
"Alef",
"ALF",
"ALGOL 58",
"ALGOL 60",
"ALGOL 68",
"ALGOL W",
"Alice",
"Alma-0",
"AmbientTalk",
"Amiga E",
"AMOS",
"AMPL",
"Apex (Salesforce.com)",
"APL",
"AppleScript",
"Arc",
"ARexx",
"Argus",
"AspectJ",
"Assembly language",
"ATS",
"Ateji PX",
"AutoHotkey",
"Autocoder",
"AutoIt",
"AutoLISP / Visual LISP",
"Averest",
"AWK",
"Axum",
"Active Server Pages",
"ASP.NET"
];
// Inline
let TagifyCustomInlineSuggestion = new Tagify(TagifyCustomInlineSuggestionEl, {
whitelist: whitelist,
maxTags: 10, // allows to select max items
dropdown: {
maxItems: 20, // display max items
classname: "tags-inline", // Custom inline class
enabled: 0,
closeOnSelect: false
}
});
Custom Suggestions: List
Create list tags input with multiple selection.
<div class="mb-3">
<label for="TagifyCustomListSuggestion" class="form-label">Custom List Suggestions</label>
<input id="TagifyCustomListSuggestion" name="TagifyCustomListSuggestion" class="form-control" placeholder="select technologies" value="css, html, php">
</div>
const TagifyCustomListSuggestionEl = document.querySelector("#TagifyCustomListSuggestion");
const whitelist = [
"A# .NET",
"A# (Axiom)",
"A-0 System",
"A+",
"A++",
"ABAP",
"ABC",
"ABC ALGOL",
"ABSET",
"ABSYS",
"ACC",
"Accent",
"Ace DASL",
"ACL2",
"Avicsoft",
"ACT-III",
"Action!",
"ActionScript",
"Ada",
"Adenine",
"Agda",
"Agilent VEE",
"Agora",
"AIMMS",
"Alef",
"ALF",
"ALGOL 58",
"ALGOL 60",
"ALGOL 68",
"ALGOL W",
"Alice",
"Alma-0",
"AmbientTalk",
"Amiga E",
"AMOS",
"AMPL",
"Apex (Salesforce.com)",
"APL",
"AppleScript",
"Arc",
"ARexx",
"Argus",
"AspectJ",
"Assembly language",
"ATS",
"Ateji PX",
"AutoHotkey",
"Autocoder",
"AutoIt",
"AutoLISP / Visual LISP",
"Averest",
"AWK",
"Axum",
"Active Server Pages",
"ASP.NET"
];
// List
let TagifyCustomListSuggestion = new Tagify(TagifyCustomListSuggestionEl, {
whitelist: whitelist,
maxTags: 10, // allows to select max items
dropdown: {
maxItems: 20, // display max items
classname: "", // Custom inline class
enabled: 0,
closeOnSelect: false
}
});
Users List
This example shows how to customize Tagify further. It also includes an 'Add all' option as the first item in the suggestions dropdown list.
<div class="mb-3">
<label for="TagifyUserList" class="form-label">Users List</label>
<input id="TagifyUserList" name="TagifyUserList" class="form-control" value="abatisse2@nih.gov, Justinian Hattersley" />
</div>
const TagifyUserListEl = document.querySelector("#TagifyUserList");
const usersList = [
{
value: 1,
name: "Justinian Hattersley",
avatar: "https://i.pravatar.cc/80?img=1",
email: "jhattersley0@ucsd.edu"
},
{
value: 2,
name: "Antons Esson",
avatar: "https://i.pravatar.cc/80?img=2",
email: "aesson1@ning.com"
},
{
value: 3,
name: "Ardeen Batisse",
avatar: "https://i.pravatar.cc/80?img=3",
email: "abatisse2@nih.gov"
},
{
value: 4,
name: "Graeme Yellowley",
avatar: "https://i.pravatar.cc/80?img=4",
email: "gyellowley3@behance.net"
},
{
value: 5,
name: "Dido Wilford",
avatar: "https://i.pravatar.cc/80?img=5",
email: "dwilford4@jugem.jp"
},
{
value: 6,
name: "Celesta Orwin",
avatar: "https://i.pravatar.cc/80?img=6",
email: "corwin5@meetup.com"
},
{
value: 7,
name: "Sally Main",
avatar: "https://i.pravatar.cc/80?img=7",
email: "smain6@techcrunch.com"
},
{
value: 8,
name: "Grethel Haysman",
avatar: "https://i.pravatar.cc/80?img=8",
email: "ghaysman7@mashable.com"
},
{
value: 9,
name: "Marvin Mandrake",
avatar: "https://i.pravatar.cc/80?img=9",
email: "mmandrake8@sourceforge.net"
},
{
value: 10,
name: "Corrie Tidey",
avatar: "https://i.pravatar.cc/80?img=10",
email: "ctidey9@youtube.com"
}
];
function tagTemplate(tagData) {
return `
<tag title="${tagData.title || tagData.email}"
contenteditable='false'
spellcheck='false'
tabIndex="-1"
class="${this.settings.classNames.tag} ${tagData.class ? tagData.class : ''}"
${this.getAttributes(tagData)}
>
<x title='' class='tagify__tag__removeBtn' role='button' aria-label='remove tag'></x>
<div>
<div class='tagify__tag__avatar-wrap'>
<img onerror="this.style.visibility='hidden'" src="${tagData.avatar}">
</div>
<span class='tagify__tag-text'>${tagData.name}</span>
</div>
</tag>
`;
}
function suggestionItemTemplate(tagData) {
return `
<div ${this.getAttributes(tagData)}
class='tagify__dropdown__item align-items-center ${tagData.class ? tagData.class : ''}'
tabindex="0"
role="option"
>
${tagData.avatar ?
`<div class='tagify__dropdown__item__avatar-wrap'>
<img onerror="this.style.visibility='hidden'" src="${tagData.avatar}">
</div>`
: ''
}
<span class="fw-medium">${tagData.name}</span>
<span>${tagData.email}</span>
</div>
`;
}
// initialize Tagify on the above input node reference
let TagifyUserList = new Tagify(TagifyUserListEl, {
tagTextProp: "name", // very important since a custom template is used with this property as text. allows typing a "value" or a "name" to match input with whitelist
enforceWhitelist: true,
skipInvalid: true, // do not remporarily add invalid tags
dropdown: {
closeOnSelect: false,
enabled: 0,
classname: "users-list",
searchKeys: ["name", "email"] // very important to set by which keys to search for suggesttions when typing
},
templates: {
tag: tagTemplate,
dropdownItem: suggestionItemTemplate
},
whitelist: usersList
});
TagifyUserList.on("dropdown:show dropdown:updated", onDropdownShow);
TagifyUserList.on("dropdown:select", onSelectSuggestion);
let addAllSuggestionsEl;
function onDropdownShow(e) {
let dropdownContentEl = e.detail.tagify.DOM.dropdown.content;
if (TagifyUserList.suggestedListItems.length > 1) {
addAllSuggestionsEl = getAddAllSuggestionsEl();
// insert "addAllSuggestionsEl" as the first element in the suggestions list
dropdownContentEl.insertBefore(addAllSuggestionsEl, dropdownContentEl.firstChild);
}
}
function onSelectSuggestion(e) {
if (e.detail.elm == addAllSuggestionsEl) TagifyUserList.dropdown.selectAll.call(TagifyUserList);
}
// create an "add all" custom suggestion element every time the dropdown changes
function getAddAllSuggestionsEl() {
// suggestions items should be based on "dropdownItem" template
return TagifyUserList.parseTemplate("dropdownItem", [
{
class: "addAll",
name: "Add all",
email:
TagifyUserList.settings.whitelist.reduce(function(remainingSuggestions, item) {
return TagifyUserList.isTagDuplicate(item.value) ? remainingSuggestions : remainingSuggestions + 1;
}, 0) + " Members"
}
]);
}
Email list
No placeholder, and no way of adding tags from within the component, but only by clicking the (+) button, which is not related to Tagify in anyway, but in this example it is shown how combining a few simple things make customization easy.
<div class="mb-3">
<label for="TagifyEmailList" class="form-label d-block">Email List</label>
<input id="TagifyEmailList" class="tagify-email-list" value="some56.name@website.com">
<button type="button" class="btn btn-sm btn-outline-primary btn-icon rounded-pill mb-1"><span class="tf-icons bx bx-plus"></span></button>
</div>
// generate random whitelist items (for the demo)
let randomStringsArr = Array.apply(null, Array(100)).map(function() {
return (
Array.apply(null, Array(~~(Math.random() * 10 + 3)))
.map(function() {
return String.fromCharCode(Math.random() * (123 - 97) + 97);
})
.join("") + "@gmail.com"
);
});
const TagifyEmailListEl = document.querySelector("#TagifyEmailList");
const TagifyEmailList = new Tagify(TagifyEmailListEl, {
// email address validation (https://stackoverflow.com/a/46181/104380)
pattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
whitelist: randomStringsArr,
callbacks: {
invalid: onInvalidTag
},
dropdown: {
position: "text",
enabled: 1 // show suggestions dropdown after 1 typed character
}
});
const button = TagifyEmailListEl.nextElementSibling; // "add new tag" action-button
button.addEventListener("click", onAddButtonClick);
function onAddButtonClick() {
TagifyEmailList.addEmptyTag();
}
function onInvalidTag(e) {
console.log("invalid", e.detail);
}
Bootstrap Select is the jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more.
Usage
In order to use Bootstrap Select on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:
<link rel="stylesheet" href="assets/vendor/libs/bootstrap-select/bootstrap-select.css" />
Include the following vendors script in the "Vendors JS" area from the page's footer:
<script src="assets/vendor/libs/bootstrap-select/bootstrap-select.js"></script>
Basic
To create a basic bootstrap select, initialize your select element like this: YOUR_ELEMENT.selectpicker();
<div class="mb-3">
<label for="selectpickerBasic" class="form-label">Basic</label>
<select id="selectpickerBasic" class="selectpicker w-100" data-style="btn-default">
<option>Rocky</option>
<option>Pulp Fiction</option>
<option>The Godfather</option>
</select>
</div>
$(".selectpicker").selectpicker();
Groups
To create a grouped bootstrap select, use <optgroup label="Movies">...</optgroup>
.
<div class="mb-3">
<label for="selectpickerGroups" class="form-label">Groups</label>
<select id="selectpickerGroups" class="selectpicker w-100" data-style="btn-default">
<optgroup label="Movies">
<option>Rocky</option>
<option>Pulp Fiction</option>
<option>The Godfather</option>
</optgroup>
<optgroup label="Series">
<option>Breaking Bad</option>
<option>Black Mirror</option>
<option>Money Heist</option>
</optgroup>
</select>
</div>
$(".selectpicker").selectpicker();
Multiple
To create a multiple bootstrap select, use multiple
attribute with <select>
.
<div class="mb-3">
<label for="selectpickerMultiple" class="form-label">Multiple</label>
<select id="selectpickerMultiple" class="selectpicker w-100" data-style="btn-default" multiple data-icon-base="bx" data-tick-icon="bx-check text-primary">
<option>Rocky</option>
<option>Pulp Fiction</option>
<option>The Godfather</option>
</select>
</div>
$(".selectpicker").selectpicker();
Live Search
To create a bootstrap select with a live search, use data-live-search="true"
attribute with <select>
and data-tokens="YOUR_TOKEN"
attribute with <option>
.
<div class="mb-3">
<label for="selectpickerLiveSearch" class="form-label">Live Search</label>
<select id="selectpickerLiveSearch" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
<option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
<option data-tokens="mustard">Burger, Shake and a Smile</option>
<option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>
</div>
$(".selectpicker").selectpicker();
Icons
Use data-icon
attribute with <option>
to create a select with icons.
<div class="mb-3">
<label for="selectpickerIcons" class="form-label">Icons</label>
<select id="selectpickerIcons" class="selectpicker w-100 show-tick" data-icon-base="bx" data-tick-icon="bx-check text-primary" data-style="btn-default">
<option data-icon="bx bxl-instagram">Instagram</option>
<option data-icon="bx bxl-pinterest-alt">Pinterest</option>
<option data-icon="bx bxl-twitch">Twitch</option>
</select>
</div>
$(".selectpicker").selectpicker();
Sub Text
Use data-show-subtext="true"
attribute with <select>
and use data-subtext
attribute with <option>
to create a select with subtext.
<div class="mb-3">
<label for="selectpickerSubtext" class="form-label">Subtext</label>
<select id="selectpickerSubtext" class="selectpicker w-100" data-style="btn-default" data-show-subtext="true">
<option data-subtext="Framework">React</option>
<option data-subtext="Styles">Sass</option>
<option data-subtext="Markup">HTML</option>
</select>
</div>
$(".selectpicker").selectpicker();
Selection Limit
Use data-max-options="NUMBER"
and multiple
attributes with <select>
to create a select with limited selection.
<div class="mb-3">
<label for="selectpickerSelection" class="form-label">Selection Limit</label>
<select id="selectpickerSelection" class="selectpicker w-100" data-style="btn-default" multiple data-max-options="2">
<option>Rocky</option>
<option>Pulp Fiction</option>
<option>The Godfather</option>
</select>
</div>
$(".selectpicker").selectpicker();
Select / Deselect all
Use data-actions-box="true"
and multiple
attributes with <select>
to create a select with select and deselect options.
<div class="mb-3">
<label for="selectpickerSelectDeselect" class="form-label">Select / Deselect All</label>
<select id="selectpickerSelectDeselect" class="selectpicker w-100" data-style="btn-default" multiple data-actions-box="true">
<option>Rocky</option>
<option>Pulp Fiction</option>
<option>The Godfather</option>
</select>
</div>
$(".selectpicker").selectpicker();
Divider
Use data-divider="true"
attribute with <option>
to add divider between options.
<div class="mb-3">
<label for="selectpickerDivider" class="form-label">Divider</label>
<select id="selectpickerDivider" class="selectpicker w-100" data-style="btn-default">
<option>Rocky</option>
<option data-divider="true">Divider</option>
<option>Pulp Fiction</option>
<option>The Godfather</option>
</select>
</div>
$(".selectpicker").selectpicker();
Header
Use data-header
attribute with <select>
to add header to your select.
<div class="mb-3">
<label for="selectpickerHeader" class="form-label">Header</label>
<select id="selectpickerHeader" class="selectpicker w-100" data-style="btn-default" data-header="Select a Movie">
<option>Rocky</option>
<option>Pulp Fiction</option>
<option>The Godfather</option>
</select>
</div>
$(".selectpicker").selectpicker();
Disabled
Use disabled
attribute with <select>
to disable your select.
<div class="mb-3">
<label for="selectpickerDisabled" class="form-label">Disabled</label>
<select id="selectpickerDisabled" class="selectpicker w-100" data-style="btn-default" disabled>
<option>Rocky</option>
<option>Pulp Fiction</option>
<option>The Godfather</option>
</select>
</div>
$(".selectpicker").selectpicker();
Disabled Option
Use disabled
attribute with <option>
to disable your option.
<div class="mb-3">
<label for="selectpickerDisabledOptions" class="form-label">Disabled Options</label>
<select id="selectpickerDisabledOptions" class="selectpicker w-100" data-style="btn-default">
<option>Rocky</option>
<option disabled>Pulp Fiction</option>
<option>The Godfather</option>
</select>
</div>
$(".selectpicker").selectpicker();
Typeahead is a flexible JavaScript library that provides a strong foundation for building robust typeaheads.
Usage
In order to use Typeahead on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:
<link rel="stylesheet" href="assets/vendor/libs/typeahead-js/typeahead.css" />
Include the following vendors script in the "Vendors JS" area from the page's footer:
<script src="assets/vendor/libs/typeahead-js/typeahead.js"></script>
First, create string matcher function to match the state from states array. We will use this in below example.
// String Matcher function
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substrRegex;
matches = [];
substrRegex = new RegExp(q, "i");
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
matches.push(str);
}
});
cb(matches);
};
};
var states = [ "Alabama", "Alaska", ... ];
Basic
<div class="mb-3">
<label for="TypeaheadBasic" class="form-label">Basic</label>
<input id="TypeaheadBasic" class="form-control typeahead" type="text" autocomplete="off" placeholder="Enter states from USA" />
</div>
$(".typeahead").typeahead(
{
highlight: true,
minLength: 1
},
{
name: "states",
source: substringMatcher(states)
}
);
BloodHound
<div class="mb-3">
<label for="TypeaheadBloodHound" class="form-label">BloodHound (Suggestion Engine)</label>
<input id="TypeaheadBloodHound" class="form-control typeahead-bloodhound" type="text" autocomplete="off" placeholder="Enter states from USA" />
</div>
var bloodhoundBasicExample = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: states
});
$(".typeahead-bloodhound").typeahead(
{
highlight: true,
minLength: 1
},
{
name: "states",
source: bloodhoundBasicExample
}
);
Prefetch
<div class="mb-3">
<label for="TypeaheadPrefetch" class="form-label">Prefetch</label>
<input id="TypeaheadPrefetch" class="form-control typeahead-prefetch" type="text" autocomplete="off" placeholder="Enter states from USA" />
</div>
var prefetchExample = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: "../../assets/json/typeahead.json"
});
$(".typeahead-prefetch").typeahead(
{
highlight: true,
minLength: 1
},
{
name: "states",
source: prefetchExample
}
);
Default Suggestions
<div class="mb-3">
<label for="TypeaheadSuggestions" class="form-label">Default Suggestions</label>
<input id="TypeaheadSuggestions" class="form-control typeahead-default-suggestions" type="text" autocomplete="off" />
</div>
var prefetchExample = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: "../../assets/json/typeahead.json"
});
// Render default Suggestions
function renderDefaults(q, sync) {
if (q === "") {
sync(prefetchExample.get("London", "Derbyshire", "Cambridgeshire"));
} else {
prefetchExample.search(q, sync);
}
}
// Initialize
$(".typeahead-default-suggestions").typeahead(
{
highlight: true,
minLength: 0
},
{
name: "states",
source: renderDefaults
}
);
Custom Template
<div class="mb-3">
<label for="TypeaheadCustom" class="form-label">Custom Template</label>
<input id="TypeaheadCustom" class="form-control typeahead-custom-template" type="text" autocomplete="off" placeholder="Search For Oscar Winner" />
</div>
var customTemplate = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: "../../assets/json/typeahead-data-2.json"
});
// Initialize
$(".typeahead-custom-template").typeahead(null, {
name: "best-movies",
display: "value",
source: customTemplate,
highlight: true,
templates: {
empty: [
'<div class="empty-message p-2">',
"unable to find any Best Picture winners that match the current query",
"</div>"
].join("\n"),
suggestion: function(data) {
return "<div><span class="fw-medium">" + data.value + "</span> – " + data.year + "</div>";
}
}
});
Multiple Datasets
<div class="mb-3">
<label for="TypeaheadMultipleDataset" class="form-label">Multiple Datasets</label>
<input id="TypeaheadMultipleDataset" class="form-control typeahead-multi-datasets" type="text" autocomplete="off" />
</div>
var nbaTeams = [...];
var nhlTeams = [...];
var nbaExample = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace("team"),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: nbaTeams
});
var nhlExample = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace("team"),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: nhlTeams
});
// Initialize
$(".typeahead-multi-datasets").typeahead({
highlight: true,
minLength: 0
},
{
name: "nba-teams",
source: nbaExample,
display: "team",
templates: {
header:
'<h4 class="league-name border-bottom mb-0 mx-4 mt-4 pb-2">NBA Teams</h4>'
}
},
{
name: "nhl-teams",
source: nhlExample,
display: "team",
templates: {
header:
'<h4 class="league-name border-bottom mb-0 mx-4 mt-4 pb-2">NHL Teams</h4>'
}
}
)