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="form-floating form-floating-outline">
<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>
<label for="select2Basic">Basic</label>
</div>
$(".select2").select2();
Multiple
Use multiple
attribute with select tag to create a select2 with multiple values.
<div class="form-floating form-floating-outline">
<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>
<label for="select2Multiple">Multiple</label>
</div>
$(".select2").select2();
Disabled
Use disabled
attribute with select tag to create a disabled select2.
<div class="form-floating form-floating-outline">
<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>
<label for="select2Disabled">Disabled</label>
</div>
$(".select2").select2();
Icons
You can use selet2's templating options to create a select2 with icons—refer below mentioned example.
<div class="form-floating form-floating-outline">
<select id="select2Icons" class="select2-icons form-select">
<optgroup label="Services">
<option value="wordpress2" data-icon="ri-wordpress-fill" selected>WordPress</option>
<option value="codepen" data-icon="ri-codepen-line">Codepen</option>
<option value="drupal" data-icon="ri-drop-fill">Drupal</option>
<option value="pinterest2" data-icon="ri-css3-fill">CSS3</option>
<option value="html5" data-icon="ri-html5-fill">HTML5</option>
</optgroup>
<optgroup label="File types">
<option value="pdf" data-icon="ri-file-pdf-2-line">PDF</option>
<option value="word" data-icon="ri-file-word-line">Word</option>
<option value="excel" data-icon="ri-file-cloud-line">JSON</option>
<option value="facebook" data-icon="ri-facebook-circle-fill">Facebook</option>
</optgroup>
<optgroup label="Browsers">
<option value="chrome" data-icon="ri-chrome-line">Chrome</option>
<option value="firefox" data-icon="ri-firefox-fill">Firefox</option>
<option value="safari" data-icon="ri-edge-new-fill">Edge</option>
<option value="opera" data-icon="ri-opera-fill">Opera</option>
<option value="IE" data-icon="ri-edge-fill">IE</option>
</optgroup>
</select>
<label for="select2Icons">Icons</label>
</div>
// custom template to render icons
function renderIcons(option) {
if (!option.id) {
return option.text;
}
var $icon = "<i class='" + $(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="form-floating form-floating-outline">
<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>
<label for="select2Primary">Primary</label>
</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="form-floating form-floating-outline">
<input id="TagifyBasic" class="form-control" name="TagifyBasic" value="Tag1, Tag2, Tag3" />
<label for="TagifyBasic">Basic</label>
</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="form-floating form-floating-outline">
<input id="TagifyReadonly" class="form-control" readonly value="Tag1, Tag2, Tag3" />
<label for="TagifyReadonly">Readonly</label>
</div>
const tagifyReadonlyEl = document.querySelector("#TagifyReadonly");
const TagifyReadonly = new Tagify(tagifyReadonlyEl);
Custom Suggestions: Inline
Create inline tags input with multiple selection.
<div class="form-floating form-floating-outline">
<input id="TagifyCustomInlineSuggestion" name="TagifyCustomInlineSuggestion" class="form-control h-auto" placeholder="select technologies" value="css, html, javascript">
<label for="TagifyCustomInlineSuggestion">Custom Inline Suggestions</label>
</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="form-floating form-floating-outline">
<input id="TagifyCustomListSuggestion" name="TagifyCustomListSuggestion" class="form-control h-auto" placeholder="select technologies" value="css, html, php">
<label for="TagifyCustomListSuggestion">Custom List Suggestions</label>
</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="form-floating form-floating-outline">
<input id="TagifyUserList" name="TagifyUserList" class="form-control h-auto" value="abatisse2@nih.gov, Justinian Hattersley" />
<label for="TagifyUserList">Users List</label>
</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 rounded-pill btn-icon btn-outline-primary m-1"><span class="tf-icons ri-add-line"></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="form-floating form-floating-outline">
<select id="selectpickerBasic" class="selectpicker w-100" data-style="btn-default">
<option>Rocky</option>
<option>Pulp Fiction</option>
<option>The Godfather</option>
</select>
<label for="selectpickerBasic">Basic</label>
</div>
$(".selectpicker").selectpicker();
Groups
To create a grouped bootstrap select, use <optgroup label="Movies">...</optgroup>
.
<div class="form-floating form-floating-outline">
<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>
<label for="selectpickerGroups">Groups</label>
</div>
$(".selectpicker").selectpicker();
Multiple
To create a multiple bootstrap select, use multiple
attribute with <select>
.
<div class="form-floating form-floating-outline">
<select id="selectpickerMultiple" class="selectpicker w-100" data-style="btn-default" multiple data-tick-icon="ri-check-line text-white">
<option>Rocky</option>
<option>Pulp Fiction</option>
<option>The Godfather</option>
</select>
<label for="selectpickerMultiple">Multiple</label>
</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="form-floating form-floating-outline">
<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>
<label for="selectpickerLiveSearch">Live Search</label>
</div>
$(".selectpicker").selectpicker();
Icons
Use data-icon
attribute with <option>
to create a select with icons.
<div class="form-floating form-floating-outline">
<select class="selectpicker w-100 show-tick" id="selectpickerIcons" data-tick-icon="ri-check-line" data-style="btn-default">
<option data-icon="ri-instagram-line">Instagram</option>
<option data-icon="ri-pinterest-fill">Pinterest</option>
<option data-icon="ri-twitch-fill">Twitch</option>
</select>
<label for="selectpickerIcons">Icons</label>
</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="form-floating form-floating-outline">
<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>
<label for="selectpickerSubtext">Subtext</label>
</div>
$(".selectpicker").selectpicker();
Selection Limit
Use data-max-options="NUMBER"
and multiple
attributes with <select>
to create a select with limited selection.
<div class="form-floating form-floating-outline">
<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>
<label for="selectpickerSelection">Selection Limit</label>
</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="form-floating form-floating-outline">
<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>
<label for="selectpickerSelectDeselect">Select / Deselect All</label>
</div>
$(".selectpicker").selectpicker();
Divider
Use data-divider="true"
attribute with <option>
to add divider between options.
<div class="form-floating form-floating-outline">
<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>
<label for="selectpickerDivider">Divider</label>
</div>
$(".selectpicker").selectpicker();
Header
Use data-header
attribute with <select>
to add header to your select.
<div class="form-floating form-floating-outline">
<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>
<label for="selectpickerHeader">Header</label>
</div>
$(".selectpicker").selectpicker();
Disabled
Use disabled
attribute with <select>
to disable your select.
<div class="form-floating form-floating-outline">
<select id="selectpickerDisabled" class="selectpicker w-100" data-style="btn-default" disabled>
<option>Rocky</option>
<option>Pulp Fiction</option>
<option>The Godfather</option>
</select>
<label for="selectpickerDisabled">Disabled</label>
</div>
$(".selectpicker").selectpicker();
Disabled Option
Use disabled
attribute with <option>
to disable your option.
<div class="form-floating form-floating-outline">
<select id="selectpickerDisabledOptions" class="selectpicker w-100" data-style="btn-default">
<option>Rocky</option>
<option disabled>Pulp Fiction</option>
<option>The Godfather</option>
</select>
<label for="selectpickerDisabledOptions">Disabled Options</label>
</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>'
}
}
)