Hide search input on specific select

[hmaesta]

Hello.

Is there a way of hide the search input on specific select?

Some selects in my website are just too short to have a search input, so I want it hidden – like this one in Chosen plugin.

Thank you.

[asessa]

Hi,

You can solve this if you disable the input field:

Disable all

$('.selectize-input > input').prop('disabled', 'disabled');

Disable by select field id

$('#select_field_id').next().find('div.selectize-input > input').prop('disabled', 'disabled');

By adding a hide-search attribute to your select field

$('select').each(function(i,e)
{
    $(e).selectize();

    if ($(e).attr('hide-search'))
    {
        $(e).next().find('div.selectize-input > input').prop('disabled', 'disabled');
    }
});
``

[osabate]

+1 to turn it into a built-in feature

[osabate]

@asessa these suggestions partially work but don't solve the full problem. When disabling the input text field, it disables the click event on the the space/area that it occupies :-(

[djchar89]

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

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

But this will occur whole selectize select boxes

[neilmonroe]

Is it not just as simple as:

1. Add a CSS class of no-search to your HTML select.
2. Add the following rule to your stylesheet.
   .selectize-control.no-search input { display: none !important; }

You may need to adjust it to fit your situation, but this seemed to work in the code I am working on.

[adamsoffer]

+1 to turn it into a built-in feature

[billybonks]

+1 but apparently its not part of the scope -.-

[JustasKuizinas]

+1 for built-in feature

[oceangravity]

+1 for built-in feature

[joallard]

Dupe #110

[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;
}