Question 49998 in Javascript Question posted in
A very good W3school tutorial can be found here.

Add remove button on custom template Tom-Select – Javascript

I have some problems with the Tom-Select template. When I use the default template, I can delete an item with the Delete button. But when I’ve defined mine, I can’t delete anything.

I’ve my tomSelect element stored in tomSelect and the "DOM" change are applied, but I ve no cross to delete this.

<select id="service-filter" name="service-filter" class="form-control" placeholder={{ 'forms.placeholder.service'|trans }} multiple="multiple" {{ stimulus_controller('symfony/ux-autocomplete/autocomplete', { url: path('get_services_and_customers', {}), }) }} ></select>

`
_onConnect(event) {

const options = event.detail.options || {}; // Add default value for options
const tomSelect = event.detail.tomSelect;

tomSelect.settings.plugins = ["remove_button"];

tomSelect.settings.render = {
    option: function(data, escape) {
        return '<div>' + '<span class="title">' + escape(data.text) + '</span>' + '</div>';
    },
    item: function(data, escape) {
        return '<div>' +  '<span class="title">' + escape(data.text) + '</span>' + '<a href="javascript:void(0)" class="remove" tabindex="-1" title="">×</a>' + '</div>';
    }
}

}

`

What I did wrong

I just want to define my custom template and continue using Tom-Select’s ‘remove_button’ plugin

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I ve found a temporary solution to concerve the remove button for now, but not the best one, because i need to modify my item template to...

    tomSelect.settings.render["option"] = function(data, escape) {
    # code ...
}

    it save the default item template so the remove button still exist

    // tomSelect.settings.render["item"] = function(data, escape) {
    // # code ...
// }

  2. 0

    You haven’t enabled the remove_button plugin. The remove_button plugin is responsible for adding the cross to the selected items, which allows the user to delete them.

    To enable the remove_button plugin, you need to set the plugins option in the tomSelect object to an array that includes the string remove_button:

    tomSelect.settings.plugins = ["remove_button"];
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search