我在使用Tom-Select模板时遇到一些问题。当我使用默认模板时,我可以使用“删除”按钮删除项目。但当我定义了自己的模板时,我无法删除任何内容。
我已经将tomSelect元素存储在tomSelect中,并且应用了“DOM”更改,但是我没有十字架来删除它。
<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>';
}
}
}
”
我做错了什么
我只是想定义我的自定义模板,并继续使用汤姆选择的'删除按钮'插件
2条答案
按热度按时间qq24tv8q1#
您尚未启用remove_button插件,remove_button插件负责为选中的项目添加叉号,允许用户删除选中的项目。
要启用remove_button插件,需要将tomSelect对象中的plugins选项设置为包含字符串remove_button的数组:
6rqinv9w2#
我已经找到了一个临时的解决方案来concerve现在的删除按钮,但不是最好的一个,因为我需要修改我的项目模板,以...
tomSelect.settings.render["option"] = function(data, escape) { # code ... }
它保存默认的项目模板,这样删除按钮仍然存在
// tomSelect.settings.render["item"] = function(data, escape) { // # code ... // }