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

  <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

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

  <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

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

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

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>'
    }
  }
)
© 2017- Pixinvent, Hand-crafted & Made with ❤️