Disable text input on a vanilla select

[arathael]

Is there any configuration option to explicitly disable text input on the control?

I mean, not to disable the dropdown, but just disable keyboard input (and the caret blinking), something like the readonly attr for the generated text input maybe?

[brianreavis]

This is probably out of the scope of Selectize. For something like this, I'd look at regular <select> decorators. You could try hiding the input with CSS, but it's likely going to behave strangely.

Here's a good list of options:
http://www.unheap.com/section/inputs-forms/selectboxes/

[efreibe]

How about setting field as readonly, and prevent backspace deleting input contents?

Dumb design to not enable a choice. Whatever you may believe your library to be, it has obviously transpired to a complex dropdown/select replacement and it's absurd for it to be opinionated about basic design patterns and simply chop them off.

[brianreavis]

@filipnaumovic Hah. If you don't like it, pick another library? If Selectize supported every case that every user wanted, it would be gigantic and unmaintainable. And with this being open source software, if someone is really interested in this feature... there's nothing stopping them from forking it and adding it in. There are many libraries that provide what this issue is talking about – I see no immediate need for it.

Adding an option for a feature you already implemented (and we're talking about a pure dropdown base that all your features extend from anyway) is hardly calling for a gigantic unmaintainable change. Out of all you should know very well how direly fucked up is the front-end situation with these dropdown/option widgets - I guess you wouldn't even bother creating this if you didn't. There's a million of them that do next to nothing aside being a HTML styleable structured clone of the option tag. Then there's yours, there's Select2 and there's, thank god, Chosen - not much else is usable as a complete solution across a multitude of projects in modern rich UI scenarios.

An actual need exists in dev teams (specifically larger ones) for not having to drop in new random widgets for every little thing, re-learning their API, their quirks and inconsistencies and it's a blessing to have one consistently well performing widget that deals with all your dropdown needs that you don't have to bend sideways to make work. Yours is very close to being that widget, if not for these self-crippling decisions. It does every little advanced thing a dropdown can wish for, except the basic dropdown itself. How far is that really?

[litchfield]

@brianreavis, consider the instance where full selectize functionality is desired for some fields on a form but not all. What then? Use selectize for some, but another simpler library for the others? Surely a "noTextInput" option would be useful here. Shall I code it up?

[litchfield]

Chosen has the option http://harvesthq.github.io/chosen/#hide-search-on-single-select

[efreibe]

This fiddle does not solve it for you? http://jsfiddle.net/dz9mhob7/6/

[styledev]

Just to note the input field is super annoying on a mobile device such as a phone when all you want is the user to use the dropdown but it pops up the keyboard. I would consider an option to remove the input or at least the focus to it necessary for the user experience on such a device.

A fix outside of options is:
$('.selectize-input input').prop('disabled', true);

[tltowles]

@efreibe Thank you!

[djchar89]

You can disable pointer for the "selectize-control" div.

example:
$('.selectize-control').css('pointer-events', 'none');

[harpreetsb]

Incase this helps

/**
 * triggerSelect
 * @param className
 */

function triggerSelect(className, sort, search, addnew) {
    if (typeof(addnew) == "undefined") {
        addnew = false;
    }

    if (typeof(search) == "undefined") {
        search = false;
    }

    if (sort == true) {
        $(className).selectize({
            create: addnew,
            sortField:'text',
            closeAfterSelect: true
        });
    }
    else{ // get rid of alphabetic ordering
        $(className).selectize({
            create: addnew,
            closeAfterSelect: true
        });
    }

    if (search == false) { // remove input if required
        $(className).siblings('.selectize-control').children('.selectize-input').children('input').attr('disabled', true);
    }
}

[AndreaCatania]

Have you found a solution? as "styledev" said the input is very very bad on mobile phone.... it's a good library and add 1 option to disable inputbox is very useful for all...

If you add option readOnly where if true the system add the attribute readonly to input element "''" at line https://github.com/brianreavis/selectize.js/blob/master/src/selectize.js#L124 it's easy.

---

EDIT 1

Fast implementation fix

To fast add this features i've changed this line of code:

$control_input = $('<input type="text" autocomplete="off" />').appendTo($control).attr('tabindex', $input.is(':disabled') ? '-1' : self.tabIndex);

WITH

$control_input = $('<input type="text" autocomplete="off" />').appendTo($control).attr('readonly',typeof q.attr("data-selectize-readonly")!=='undefined'?true:false).attr('tabindex', $input.is(':disabled') ? '-1' : self.tabIndex);

now by setting "data-selectize-readonly" on the input you will have the input in readonly state.

---

EDIT 2

#803 #803