Advanced Select

Dokumentasi Tom-select.js

How to use

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

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

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

Alignment

Responsive alignment

Sizing

Methods

ParametersDescriptionDefault value

width

Set width for select field.null

dropdownWidth

Set width for dropdown.null

dropdownLeft

Align the drawdown to the left when the nue_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.{nue_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>` } }