Forms - Select & Tags | Vuexy - Bootstrap 5 Admin Template

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

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

Multiple

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

Disabled

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

Icons

<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="bootstrap5" data-icon="ti ti-brand-bootstrap" selected>Bootstrap 5</option>
      <option value="codepen" data-icon="ti ti-brand-codepen">Codepen</option>
      <option value="php" data-icon="ti ti-brand-php">PHP</option>
      <option value="pinterest2" data-icon="ti ti-brand-css3">CSS3</option>
      <option value="html5" data-icon="ti ti-brand-html5">HTML5</option>
    </optgroup>
    <optgroup label="File types">
      <option value="pdf" data-icon="ti ti-file-description">PDF</option>
      <option value="word" data-icon="ti ti-file-description">Word</option>
      <option value="js" data-icon="ti ti-brand-javascript">JavaScript</option>
      <option value="facebook" data-icon="ti ti-brand-facebook">Facebook</option>
    </optgroup>
    <optgroup label="Browsers">
      <option value="chrome" data-icon="ti ti-brand-chrome">Chrome</option>
      <option value="firefox" data-icon="ti ti-brand-firefox">Firefox</option>
      <option value="safari" data-icon="ti ti-brand-edge">Edge</option>
      <option value="opera" data-icon="ti ti-brand-opera">Opera</option>
      <option value="Ubuntu" data-icon="ti ti-brand-ubuntu">Ubuntu</option>
    </optgroup>
  </select>
</div>

// custom template to render icons
function renderIcons(option) {
  if (!option.id) {
    return option.text;
  }
  var $icon = "<i class='ti ti-" + $(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.

Primary

<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

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

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

Readonly

<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

<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

<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

<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

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

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

Multiple

<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="ti" data-tick-icon="ti-check text-white">
    <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>.

Live Search

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

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="ti" data-tick-icon="ti-check" data-style="btn-default">
  <option data-icon="ti ti-brand-instagram">Instagram</option>
  <option data-icon="ti ti-brand-pinterest">Pinterest</option>
  <option data-icon="ti ti-brand-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.

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.

Selection Limit

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

Select / Deselect All

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

Divider

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

Header

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

Disabled

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

Disabled Options

<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

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

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

<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:
        '<h5 class="league-name border-bottom mb-0 mx-3 mt-3 pb-2">NBA Teams</h5>'
    }
  },
  {
    name: "nhl-teams",
    source: nhlExample,
    display: "team",
    templates: {
      header:
        '<h5 class="league-name border-bottom mb-0 mx-3 mt-3 pb-2">NHL Teams</h5>'
    }
  }
)