Disable "remove on backspace" (or remove ibeam entirely)

Question

I'm trying to make a custom select box using selectize.js. So far it was easy to configure and the API supports about everything. The last thing I need to do is disable the option to remove items pressing backspace. For this I couldn't find any methods to call of properties to configure. Do you have any idea on how to achieve this?

Also, another thing that would work for me will be to disable "ibeam". This is the feature that allows you to use the arrow keys to navigate between the selected items. Is this is disabled the user will be able to remove only the last item which is not a big issue for me.

The perfect solution is to disable both, but disabling one of them will work too.

Thanks

Superpatriot

Answer 1

I've added 3 new config options, submitted them to github and also made a PR.

1. disableDelete: disable "delete on backspace"
2. disableCaret: disable moving between items
3. hidePlaceholder: hide the place holder when there is at least one item selected

Until the PR is accepted here is my repo: https://github.com/deiucanta/selectize.js

Superpatriot

Is there a reason you didn't extend things with a plugin instead of changing the source code? – Evaporimeter

@Evaporimeter probably because a lot of people would find that feature useful. – Krefetz

Answer 2

A little late to the game...

I wanted to stop backspace from removing items but keep the functionality of the remove buttons.

I wrote this plugin:

Selectize.define("stop_backspace_delete", function (options) {
  var self = this;

  this.deleteSelection = (function() {
    var original = self.deleteSelection;

    return function (e) {
      if (!e || e.keyCode !== 8) {
        return original.apply(this, arguments);
      }

      return false;
    };
  })();
});

Microdont

I used this with !e || (e.keyCode !== 8 && e.keyCode !== 46) to prevent the delete key as well if that's helpful to anyone – Studied

Answer 3

I just created a Selectize plugin that removes the ability for the user to deselect options. It completely prevents removing items via backspace or delete buttons.

https://github.com/akrikos/selectize-no-delete

You'll need to include the js file and add the plugin to your selectize options:

$('#selectElement').selectize({
  plugins: {
    'no-delete': {}
  }
});

Evaporimeter

Answer 4

I don't know about earlier version.

But now you can just add in configuration.

persist: true.

Overset

Answer 5

For disabling deleting you will probably change the source. Here you have relevant code fragments: https://github.com/brianreavis/selectize.js/blob/master/src/selectize.js#L434 and https://github.com/brianreavis/selectize.js/blob/master/src/selectize.js#L1557

Second thing would be simillar.

Nimble

I'd like to do this without changing the source code, it's safer for the updates. – Superpatriot

Of course, but it's just not possible :) You can always fork and send pull request to add the option, it should be easy. – Nimble

It's totally possible. You need to write a plugin for selectize that removes the ability to delete selections. I just wrote one to solve the same problem and will post a link in another answer. – Evaporimeter