Change TomSelect's text filtration or remove it outright

Question

Needed a searchable select dropdown box and found a TomSelect library that has it all set up. I added in the required library. More specifically, this solution here.

<link href="https://cdn.jsdelivr.net/npm/tom-select@2.0.0-rc.4/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.0.0-rc.4/dist/js/tom-select.complete.min.js"></script>

added in the JS code

new TomSelect("#select-state",{
    create: false,
    sortField: {
        field: "text",
        direction: "asc"
    }
});

and everything works fine as intended until I realised that TomSelect filters out my text in said HTML dropdown selection. If one of my dropdown selection was meant to say: 1 - this is option "hello" then after implementing the TomSelect, it says instead this is option, I assume filtering out elements before and after keys like - and ".

Would love to know to disable this filter, or at least modify it so that the whole text of the option is displayed otherwise the point of a dropdown is sort of defeated.

I was thinking of maybe tackling the attributes such as field: "text" but I have no idea where to begin or what other options could be. What would these SoftField option be?

I'll try the top solution https://stackoverflow.com/a/57809086/19902533 while it also doesn't work, I think that might be because the solution includes jqeuery library while I already have one. Maybe that one is too old and conflicting with what I have now? — artyi, Sep 02 '22 at 09:49

score 0 · Answer 1 · answered Sep 29 '22 at 10:42

Did you try to render your list with escaping?

new TomSelect("#select-state",{
    create: false,
    sortField: {
        field: "text",
        direction: "asc"
    },
    optionClass: 'option',
    itemClass: 'item',
    render:{
        option: function(data, escape) {
            return '<div>' + escape(data.text) + '</div>';
        },
        item: function(data, escape) {
            return '<div>' + escape(data.text) + '</div>';
        },
        dropdown:function(){
            return '<div></div>';
        },
    },
});

Change TomSelect's text filtration or remove it outright

1 Answers1