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?

[ghost]

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.

[ghost]

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

[zeeberry]

Hopefully your PR gets accepted @AndreaCatania. In the mean time I'm using this:

$('select').selectize({
    onFocus: function() {
        var input = 'selectize-input input',
              wrapper = 'selectize-input';
        $('.' + input).attr('readonly', true);
        $('.' + input + ', .' + wrapper).css('cursor', 'pointer');
     }
  });

[PawelGIX]

+1

[yavuzm]

@efreibe Helal lan sana , Thanks :)

[saysource]

My solution was to write a simple plugin:

Selectize.define('hidden_textfield', function(options) {
        var self = this;
        this.showInput = function() {
             this.$control.css({cursor: 'pointer'});
             this.$control_input.css({opacity: 0, position: 'relative', left: self.rtl ? 10000 : -10000 });
             this.isInputHidden = false;
         };

         this.setup_original = this.setup;

         this.setup = function() {
              self.setup_original();
              this.$control_input.prop("disabled","disabled");
         }
});

Then use it this way:

$('select').selectize({
            plugins: ['hidden_textfield']
        });

[joallard]

This looks like this is within scope for the project, and should be feasible. I'll look all of this over.

[aledmb]

Didn't read every comment, but here's how I did it.

JS to disable the text input:

$('.selectize-control.single .selectize-input, .selectize-control.single .selectize-input input').attr('disabled', 'disabled');

CSS to keep mouse pointer at every part of the selectize:

.selectize-control * {
        cursor: pointer;
    }

[cyphix333]

Urgh........ been using select2 but then found my way over to selectize because it does something I need that select2 doesn't and now I find out selectize doesn't even offer a vanilla dropdown option...... soooo annoying!

[aledmb]

@cyphix333 it does, my app is full of these, you just need to configure it to behave like that.

[cyphix333]

@aledmb It seems you have to implement your own hacky solution to achieve this, this concerns me as I worry it will not behave the way it is supposed to.

[aledmb]

what are you worried about? maybe we can help you.

if you just need to disable the input, it's a simple jQuery attr() call. ;)

[cyphix333]

I worry that a hacky solution can lead to unpredictable things happening under certain situations. ;)

[joallard]

@cyphix333 Yep, this can be kinda annoying, but I'm afraid we'll be stuck with it for some time as development is going at snail's pace. If you'd like to sponsor the development, not expecting this but on the off-chance, let me know. (I'm out of work right now so most of my time is spent trying to find work, and not towards Selectize development, unfortunately)

[cyphix333]

@joallard No worries. At this point not in a massive need for it, but would like to get it out of the way; if I don't find another reliable solution then I can look at this possibility further. :)

[stSaHiB]

disabling the input is a poor solution. It prevents the select from getting focus. also you can't select a value out of the dropdown, with keyboard.
As many users mentioned before, i really dont understand, why such a basic option like a simple vanilla dropdown is missing. Using some other decorator script is really no good option. It means having

• more code
• more issues
• having to style 2 scripts, so that the dropdowns all look the same
• learning 2 api...
• updating 2 scripts in your projects

@brianreavis: no it's not out of scope of this project. you can already do so many things with selectize, so why not add this basic feature?

[joallard]

As many users mentioned before, i really dont understand, why such a basic option like a simple vanilla dropdown is missing.

Because no one implemented it.

no it's not out of scope of this project. you can already do so many things with selectize, so why not add this basic feature?

That's not your call to make. But also, I made that decision when I re-opened the issue.

You want it to be implemented? Make a high-quality pull request for it. But please watch your tone, it's namely comments like this that make maintainers like me abandon the project and it ending up going at a snail's pace.

[depeele]

Tagging off @zeeberry , I hooked onInitialize instead of onFocus:

$('select').selectize({
    onInitialize: function() {
        this.$control_input.attr('readonly', true);
     }
  });

[pelenthium]

@depeele
but you have a problem when select field is required - the browser will send this field without validation

be careful

[whattafack]

@joallard please see PR #1419
I made an enhancement PR to solve this.

Thanks!

[rodrigoguariento]

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?

Readonly in selectize is a call to "lock" method. Eg.:

$('#yourElement')[0].selectize.lock();

Dynamically is possible to unlock too:

$('#yourElement')[0].selectize.unlock();

[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.

[eduardo-mior]

With a little bit of CSS and a little bit of JS we can create this. And it looks perfect.

var select = $("#my-select-input");
$(select).next().find("div.selectize-input").addClass("no-searchable"); // Adding style to the div
$(select).next().find("div.selectize-input > input").addClass("no-searchable"); // Adding style to the input
$(select).next().find("div.selectize-input > input").prop("readonly", true); // Setting the input to read-only
$(select).next().find("div.selectize-input > input").prop("inputmode", "none"); // Ensuring that the keyboard will not open on mobile
$(select).next().find("div.selectize-input > input").focus(function () { // Hack for when the search input gets the focus it will automatically blur.
    $(this).blur();
});

.no-searchable {
    cursor: pointer !important;
    background-color: #FFFFFF !important;
}
.has-items input.no-searchable {
    width: 1px !important;
}