Advanced Select

The jQuery replacement for select boxes.

Tom-select.js documentation

How to use

Copy-paste the stylesheet <link> into your <head> to load the CSS.

        
          <link rel="stylesheet" href="./node_modules/tom-select/dist/css/tom-select.bootstrap5.css">

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

        
          <script src="./node_modules/tom-select/dist/js/tom-select.complete.min.js"></script>

Copy-paste the following <script> near the end of your pages under JS Front to enable it.

        
          <script src="../assets/js/hs.tom-select.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

        
          <script>
            (function() {
              // INITIALIZATION OF SELECT
              // =======================================================
              HSCore.components.HSTomSelect.init('.js-select')
            })();
          </script>

Basic example

Custom placeholder

With append and prepend

Multiple

Multiple selection

With search inside dropdown

With search inside select box

With Icon

Optgroup

Custom tags

With images

Dropup

Trigger dropdown menus above elements by adding "dropup": true to the data-hs-tom-select-options='{}' attribute.

Alignment

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. You can change this with the directional .tom-select-custom-end classes.

Add .tom-select-custom-end to a .tom-select-custom to right align the select menu.

Responsive alignment

To align right the dropdown menu with the given breakpoint or larger, add .tom-select-custom{-sm|-md|-lg|-xl|-xxl}-end.

Resize the window to see it in action.

Sizing

Validation

Methods

Parameters Description Default value

width

 Set width for select field. null

dropdownWidth

 Set width for dropdown. null

dropdownLeft

 Align the drawdown to the left when the hs_smart_position plugin is enabled. false

hideSearch

 Remove search field. false

disableSearch

 Set disabled state for search field. false

singleMultiple

 Enable "singleMultiple" mode for multiple select. false

plugins

 Tom sleect and custom plugins. {hs_smart_position: {}}

searchInDropdown

 Insert search field in dropdow. true

hidePlaceholderOnSearch

 Hide placeholder on searhc or if item is seleted. searchInDropdown should be false. false

dropup

 Place the menu on top. false

render

 Custom render. render: { 'option': function(data, escape) { return data.optionTemplate || `<div>${data.text}</div>` }, 'item': function(data, escape) { return data.optionTemplate || `<div>${data.text}</div>` } }