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

Sizing

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

render

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