selectize.js - how can I disable the flashing cursor after the selected item?

Question

I'm using selectize.js to style text boxes, and it's working fine.

$("select[name='somename']").selectize({
  valueField: 'id',
  labelField: 'name',
  searchField: 'name',
  options: selectableThings,
  render: {
    option: function(item, escape) {
      return render(someTemplate, item);
    },
    item: function(item, escape) {
      return render(someTemplate, item);
    }
  }
});

However I have a limited range of items and do not wish for the cursor (flashing |) to be enabled all the time. I've searched through the API docs and the source but can't find anything obvious.

Is there something inbuilt to disable the flashing cursor?

Edit originally has this as 'disabling input' but it looks like the cursor can't be used for input (and disabling input still shows the cursor).

Seesaw

Answer 1

Selectize isn't particularly designed to act just as a select decorator. The cursor comes from an <input> element that allows the user wittle down options. Hiding the input will create strange behavior when the user types. Also, when the control is empty, the input is used to display the placeholder text.

Technically you can hide the cursor (and input) with CSS:

/* option a: make transparent */
.selectize-input input {
    color: transparent !important;
}

/* option b: position off-screen */
.selectize-input input {
    position: absolute !important;
    top: -9999px;
    left: -9999px;
}

But again, this is going to feel funky. I'll look into writing a decorator_only plugin that disables keyboard handling, but it's not an immediate priority.

http://jsfiddle.net/mARDE/1/

Overact

You can just set maxOptions: 1 and it'll act as a "decorated select" – Prayer

@Prayer I think you mean maxItems: 1, which is the default anyway if you initialize on a normal <select>. – Phagy

🤷‍♂️it's been a few years since I have used it, so don't remember config/option props. Op was not using via a native <select> and neither was I at the time @jih – Prayer

Answer 2

You can also use CSS text indent to move the cursor off screen:

input {
     text-indent: -100px;
}

Noelyn

Answer 3

If you want to disable the keyboard features of selectize, just make it's input readonly.

$(select).selectize(options);
select.parentNode.querySelector('input').readOnly = true;

Lulululuabourg

Answer 4

If you want to remove the blinking input cursor when using selectize for a simple single-item select drop-down, you need to set the color to transparent for the original select element that was replaced with the selectize HTML.

#myform select {
    color: transparent;
}

Whomever