How to disable the ability to search

Question

Easiest question ever, I looked at the documentation but can't find the answer. Is there an option to disable the ability to search when clicking the select?

Thanks!

Answer 1

as I'm not allowed to add a comment here is the answer:

https://tom-select.js.org/docs/#controlinput

when you set controlInput: null the search input will disappear.

Hope this helps someone else.

Answer 2

I am not sure but if you set search field to null the search will not work any more.

var control = new TomSelect('#select-tools',{
    maxItems: null,
    valueField: 'id',
    labelField: 'title',
    searchField: null, //<------------ HERE
    options: [
        {id: 1, title: 'Spectrometer', url: 'http://en.wikipedia.org/wiki/Spectrometers'},
        {id: 2, title: 'Star Chart', url: 'http://en.wikipedia.org/wiki/Star_chart'},
        {id: 3, title: 'Electrical Tape', url: 'http://en.wikipedia.org/wiki/Electrical_tape'}
    ],
    create: false
});

Answer 3

The benefit of using the plugin no_backspace_delete from https://tom-select.js.org/plugins/no-backspace-delete and change the dropdownParent to another <select> element that is display: none;

And disable on delete

...
onDelete: function(element) {
    return false;
}
...

And finally make sure create would be false

var control = new TomSelect('#select-tools',{
    maxItems: null,
    valueField: 'id',
    labelField: 'title',
    options: [
        {id: 1, title: 'Spectrometer', url: 'http://en.wikipedia.org/wiki/Spectrometers'},
        {id: 2, title: 'Star Chart', url: 'http://en.wikipedia.org/wiki/Star_chart'},
        {id: 3, title: 'Electrical Tape', url: 'http://en.wikipedia.org/wiki/Electrical_tape'}
    ],
    create: false, // Make sur this is false
    items: [1, 2], // The element that has been selected
    onDelete: function(data) {
      return false; // Disable remove element.
    },
    plugins: ['no_active_items'], // Activate no active items
    dropdownParent: '#parent-select-tools', // The parent select that is hidden.
});

#parent-select-tools{
  display: none;
 }

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.complete.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css" rel="stylesheet"/>

<label for="select-tools">Select items</label>
<select id="select-tools" ></select>


<select id="parent-select-tools"></select>