Forms - Select & Tags | Materialize - Material Design HTML 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="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.

Multiple

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

Disabled

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

Icons

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

Primary

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

Tag1

Tag2

Tag3

Basic

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

Tag1

Tag2

Tag3

Readonly

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

css

html

javascript

Custom Inline Suggestions

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

css

html

php

Custom List Suggestions

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

Ardeen Batisse

Justinian Hattersley

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

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

Basic

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

Groups

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

Multiple

  <div class="form-floating form-floating-outline">
    <select id="selectpickerMultiple" class="selectpicker w-100" data-style="btn-default" multiple data-tick-icon="ri-check-line text-white">
      <option>Rocky</option>
      <option>Pulp Fiction</option>
      <option>The Godfather</option>
    </select>
    <label for="selectpickerMultiple">Multiple</label>
  </div>

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

Live Search#

To create a bootstrap select with a live search, use data-live-search="true" attribute with <select> and data-tokens="YOUR_TOKEN" attribute with <option>.

Live Search

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

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.

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.

Selection Limit

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

Select / Deselect All

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

Divider

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

Header

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

Disabled

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

Disabled Options

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

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("London", "Derbyshire", "Cambridgeshire"));
  } else {
    prefetchExample.search(q, sync);
  }
}

// Initialize
$(".typeahead-default-suggestions").typeahead(
  {

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

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>'
    }
  }
)