Sneat Dashboard FREE by ThemeSelection

Select & Tags

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#

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().

Basic

<label for="select2Basic" class="form-label">Basic</label>
<select id="select2Basic" class="select2 form-select" 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>

$(".select2").select2();

Multiple#

Use multiple attribute with select tag to create a select2 with multiple values.

Multiple

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

$(".select2").select2();

Disabled#

Use disabled attribute with select tag to create a disabled select2.

Disabled

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

$(".select2").select2();

Icons#

You can use selet2's templating options to create a select2 with icons—refer below mentioned example.

Icons

<label for="select2Icons" class="form-label">Icons</label>
<select id="select2Icons" class="select2-icons form-select">
  <optgroup label="Services">
    <option value="wordpress2" data-icon="icon-base bx bxl-wordpress" selected>WordPress</option>
    <option value="codepen" data-icon="icon-base bx bxl-codepen">Codepen</option>
    <option value="drupal" data-icon="icon-base bx bxl-drupal">Drupal</option>
    <option value="pinterest2" data-icon="icon-base bx bxl-css3">CSS3</option>
    <option value="html5" data-icon="icon-base bx bxl-html5">HTML5</option>
  </optgroup>
  <optgroup label="File types">
    <option value="pdf" data-icon="icon-base bx bxs-file-pdf">PDF</option>
    <option value="word" data-icon="icon-base bx bxs-file-doc">Word</option>
    <option value="excel" data-icon="icon-base bx bxs-file-json">JSON</option>
    <option value="facebook" data-icon="icon-base bx bxl-facebook">Facebook</option>
  </optgroup>
  <optgroup label="Browsers">
    <option value="chrome" data-icon="icon-base bx bxl-chrome">Chrome</option>
    <option value="firefox" data-icon="icon-base bx bxl-firefox">Firefox</option>
    <option value="safari" data-icon="icon-base bx bxl-edge">Edge</option>
    <option value="opera" data-icon="icon-base bx bxl-opera">Opera</option>
    <option value="IE" data-icon="icon-base bx bxl-internet-explorer">IE</option>
  </optgroup>
</select>

// 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;
}
select2Icons.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.

Primary

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

$(".select2").select2();

Class	Value
`class="select2-{value}"`	primary \| secondary \| success \| danger \| warning \| info \| light \| dark

Tagify#

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);.

Basic

Tag1

Tag2

Tag3

<label for="TagifyBasic" class="form-label">Basic</label>
<input id="TagifyBasic" class="form-control" name="TagifyBasic" value="Tag1, Tag2, Tag3" />

const tagifyBasicEl = document.querySelector("#TagifyBasic");
const TagifyBasic = new Tagify(tagifyBasicEl);

Readonly#

Use readonly attribute with input and initialize it to create a readonly tagify.

Readonly

Tag1

Tag2

Tag3

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

Custom Inline Suggestions

css

html

javascript

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

Custom List Suggestions

css

html

php

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

Users List

Ardeen Batisse

Justinian Hattersley

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

Email List

some56.name@website.com

<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="icon-base 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#

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();

Basic

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

Groups

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

$(".selectpicker").selectpicker();

Multiple#

To create a multiple bootstrap select, use multiple attribute with <select>.

Multiple

<label for="selectpickerMultiple" class="form-label">Multiple</label>
<select id="selectpickerMultiple" class="selectpicker w-100" data-style="btn-default" multiple
  data-icon-base="icon-base bx" data-tick-icon="bx-check text-primary">
  <option>Rocky</option>
  <option>Pulp Fiction</option>
  <option>The Godfather</option>
</select>

$(".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>.

Live Search

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

$(".selectpicker").selectpicker();

Icons#

Use data-icon attribute with <option> to create a select with icons.

Icons

<label for="selectpickerIcons" class="form-label">Icons</label>
<select class="selectpicker w-100 show-tick" id="selectpickerIcons" data-icon-base="icon-base bx"
  data-tick-icon="bx-check" data-style="btn-default">
  <option data-icon="icon-base bx bxl-instagram">Instagram</option>
  <option data-icon="icon-base bx bxl-pinterest-alt">Pinterest</option>
  <option data-icon="icon-base bx bxl-twitch">Twitch</option>
</select>

$(".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.

Subtext

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

$(".selectpicker").selectpicker();

Selection Limit#

Use data-max-options="NUMBER" and multiple attributes with <select> to create a select with limited selection.

Selection Limit

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

$(".selectpicker").selectpicker();

Select / Deselect all#

Use data-actions-box="true" and multiple attributes with <select> to create a select with select and deselect options.

Select / Deselect All

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

$(".selectpicker").selectpicker();

Divider#

Use data-divider="true" attribute with <option> to add divider between options.

Divider

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

$(".selectpicker").selectpicker();

Header#

Use data-header attribute with <select> to add header to your select.

Header

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

$(".selectpicker").selectpicker();

Disabled#

Use disabled attribute with <select> to disable your select.

Disabled

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

$(".selectpicker").selectpicker();

Disabled Option#

Use disabled attribute with <option> to disable your option.

Disabled Options

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

$(".selectpicker").selectpicker();

Typeahead#

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
const substringMatcher = strs => {
  return (q, cb) => {
    const matches = [];
    const substrRegex = new RegExp(q, 'i');

    strs.forEach(str => {
      if (substrRegex.test(str)) {
        matches.push(str);
      }
    });

    cb(matches);
  };
};

// Data
const states = [ "Alabama", "Alaska", ... ];

Basic#

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#

BloodHound (Suggestion Engine)

<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#

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#

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('Alaska', 'New York', 'Washington'));
  } else {
    prefetchExample.search(q, sync);
  }
}

// Default Suggestions Example
// --------------------------------------------------------------------
$('.typeahead-default-suggestions').typeahead(
  {
    hint: !isRtl,
    highlight: true,
    minLength: 0
  },
  {
    name: 'states',
    source: renderDefaults
  }
);

Custom Template#

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 with custom templates
if (customTemplateInput) {
  $(customTemplateInput).typeahead(
    {
      highlight: true,
      hint: !isRtl
    },
    {
      name: 'best-movies',
      display: 'value',
      source: customTemplate,
      templates: {
        empty: `
        <div class="empty-message p-2">
          Unable to find any Best Picture winners that match the current query
        </div>
      `,
        suggestion: data => `
        <div>
          <span class="fw-medium">${data.value}</span> – ${data.year}
        </div>
      `
      }
    }
  );
}

Multiple Datasets#

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>

const teamsData = {
  nba: [...],
  nhl: [...]
};                  
// Function to create a Bloodhound instance
const createBloodhound = teamData => {
  return new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: teamData
  });
};

// Bloodhound Instances
const nbaExample = createBloodhound(teamsData.nba);
const nhlExample = createBloodhound(teamsData.nhl);

// Dataset Configurations
const datasets = [
  {
    name: 'nba-teams',
    source: nbaExample,
    display: 'team',
    templates: {
      header: '<h4 class="league-name border-bottom mb-0 mx-3 mt-3 pb-2">NBA Teams</h4>'
    }
  },
  {
    name: 'nhl-teams',
    source: nhlExample,
    display: 'team',
    templates: {
      header: '<h4 class="league-name border-bottom mb-0 mx-3 mt-3 pb-2">NHL Teams</h4>'
    }
  }
];

// Initialize Typeahead
const multiDatasetInput = document.querySelector('.typeahead-multi-datasets');
if (multiDatasetInput) {
  $(multiDatasetInput).typeahead(
    {
      hint: !isRtl,
      highlight: true,
      minLength: 0
    },
    ...datasets
  );
}