Chosen Jquery: remove selection by typing DEL

Question

In the example Chosen - Allow Deselect on Single Selects the possibility to uncheck the selection is implemented. But the same only works with the mouse, IE, with the keyboard has no (not discovered) how to remove the selection.

For this reason, I’m willing to implement in Chosen, a method so that when pressing the DEL key, the filled value is removed (clean, ie remove the selection without using the mouse).

So I wrote a small function that applies Chosen (settings cited in the official examples for Chosen to work), in addition, it also tests which key was pressed, and if it is the "DEL" key, I call the method limparChosen, whose code follows below:

 $('#meu_select').trigger('chosen:clear');

To trigger _this.results_reset(evt);, that’s inside Chosen.prototype.register_observers = function () {, I added to the file chosen.jquery.js, the following part within Chosen.prototype.register_observers = function () {, just below this.form_field_jq.bind("chosen:close.chosen", function(evt) {, more or less from line 699 of the original file, the following excerpt:

this.form_field_jq.bind("chosen:clear.chosen", function (evt) {
    _this.results_reset(evt);
});

To use, I test if the DEL key has been pressed, and if so, I run:

$('#meu_select').trigger('chosen:clear');

With this, everything works properly.

However, I want an alternative way to implement the above mentioned functionality without having to change the Chosen source code, because whenever I update Chosen, I will have to edit the file. What would be boring and easy to forget.

How do I implement this feature without having to change the Chosen source code?

Answer 1

You can make an external script for this, or a tag script at your convenience:

$("#foco")[0].addEventListener('keyup',function(e) {
    if (e.keyCode == 46) {  
        $("#escolha").val('').trigger('chosen:updated');
        e.stopPropagation();
    }
}, true )

See working on CODEPEN.

• id="foco" is the div that encompasses the dropdown;
• id="escolha" the element where Chosen is working;
• the key code DEL usually is 46, but only tested on Windows, it is good to check.

Note that there is no Trigger clear, for this we change the value with .val, and trigger the chosen:updated to reflect the new value.

The idea of using a addEventListener was a precious tip from @bfavaretto to avoid the need to make a chosen:close, as I had posted in the original version of the code.

Click on the comment link for more details:

"The trick is to intercept the event on capture phase - the true passed to addEventListener force that." - bfavaretto