Selectize.js: Deselect/remove/close icon in multiple selections

[vilimco]

Hi everybody.

I had a problem with a client that purely insisted on the following: "The 'Backspace' and 'Delete' buttons for unselecting a item is not acceptable solution". So, while I have unsuccesfully search a solution to this problem, I just couldn't find anything similar.

Long story short, situation is as follows:

• simple multiple select item
• each selected item should have a small "x" icon (or something similar, it doesn't matter) next to it

Since (and I repeat) I couldn't find a solution, I came up with something of my own using default callbacks in seletize:

        onItemAdd: function(value, $item) {
            // Add our closing button at the end of the newely added selection
            $($item).append("<span data-id='close-btn-selectize'>X</span>");
            var self = this;
            // Set up listener on that newly added button
            $($item).children('[data-id="close-btn-selectize"]').on("click", function(){
                // Remove selected value from the selection
                self.setValue(
                    $.grep(self.getValue(), function(v) {
                        return v != value;
                    })
                );
            });
        }

This solution works for me and clearly solved my problem with the most simple way of doing things I could find.

You can use it just as:

       $(".selectize").selectize({
        sortField : "name",
        // Other settings
        onItemAdd: function(value, $item) {
            // Add our closing button at the end of the newely added selection
            $($item).append("<span data-id='close-btn-selectize'>X</span>");
            var self = this;
            // Set up listener on that newly added button
            $($item).children('[data-id="close-btn-selectize"]').on("click", function(){
                // Remove selected value from the selection
                self.setValue(
                    $.grep(self.getValue(), function(v) {
                        return v != value;
                    })
                );
            });
        }
    });

Is there maybe some similar (or better) solution which I couldn't find?

Thank, I hope this helps somebody :)

[vilimco]

Morning update:

If you have preselected values in your select, just add following to make them closable:

                    onInitialize : function(){
                        this.setValue(this.getValue());
                    }

So, your call may look something like this:

$('.selector').selectize({
                    onItemAdd: function(value, $item) {
                        // Add our closing button at the end of the newely added selection
                        $($item).append("<span data-id='close-btn-selectize'>X</span>");
                        var self = this;
                        // Set up listener on that newly added button
                        $($item).children('[data-id="close-btn-selectize"]').on("click", function(){
                            // Remove selected value from the selection
                            self.setValue(
                                $.grep(self.getValue(), function(v) {
                                    return v != value;
                                })
                            );
                            if(self.getValue().length == 0) {
                                self.refreshOptions();
                            }
                        });
                    },
                    onInitialize : function(){
                        this.setValue(this.getValue());
                    }
                });

Also, I've noticed that when setting an empty value, last option is not added back to the list, so I've added additional check up to refresh options.

[PhiLhoSoft]

Are you aware there is a plugin precisely for this, integrated to the default build of Selectize?

[vilimco]

No, as I said in the first comment, I did not manage to find anything like this.

Could you please paste a link here? Thanks.

[PhiLhoSoft]

It is shown in the main page: http://brianreavis.github.io/selectize.js/
But a bit hidden under the Plugins tab next to the Demos one.
It is called "remove_button".

[risadams]

closing stale issues older than one year.
If this issue was closed in error please message the maintainers.
All issues must include a proper title, description, and examples.