How can I use 'multiple select boxes' option in Select2 without ability to enter text?

Question

When you use the select2 'Multiple select boxes' option it gives you the option to enter text. I want to remove this functionality so the user can only click/touch the options available and the text cursor doesn't show up.

You can see the 'Multiple select boxes' option on their example page: https://select2.github.io/examples.html

My Code. (I'm using Laravel 5 blade templating)

  <div class="row searchBoxes show">
    {!! Form::open(['method' => 'GET', 'id' => 'searchForm', 'name' => 'searchForm', 'route' => 'articles_path']) !!}
        {!! Form::select('categoryList[]', $categories, null, ['class' => 'categorySelector', 'id' => 'categoryList', 'multiple']) !!}
        {!! Form::select('dayList[]', $days, null, ['class' => 'distanceSelector', 'id' => 'dayList', 'multiple']) !!}
    {!! Form::submit('MAKE ME HAPPY', array('id' => 'submitButton', 'class' => 'searchSubmit')) !!}
   {!! Form::close() !!}
</div>

    <script type="text/javascript">
    $('#categoryList').select2({
            placeholder: "CATEGORY",
            minimumResultsForSearch: -1
          });
      $('#dayList').select2({
        placeholder: "DAY",
      minimumResultsForSearch: -1
      });
    </script>

EDIT: I found the info about 'Hiding the search box'. I have tried switching minimumResultsForSearch to 'infinity' and it still didn't work. Here is my app: www.gethappy.co.nz

score 1 · Answer 1 · edited Feb 21 '17 at 14:16

1

Use the property minimumResultsForSearch and set it as -1.

$('#categoryList').select2({
    placeholder: "CATEGORY",
    minimumResultsForSearch: -1
});

Example

The problem was listed here

edited Feb 21 '17 at 14:16

Hakan Fıstık

11,376
8
74
105

answered Jan 29 '16 at 01:10

DinoMyte

8,367
1
15
23

Thanks, that's not working for me? I have 4 options in my select dropdown. Tried changing minimumResultsForSearch to 10 as well. Didn't work. Any ideas? – thomas jaunism Jan 29 '16 at 01:43
Could you post the html ? That will help in figuring out the issue. – DinoMyte Jan 29 '16 at 02:27
added more code. It's working fine at the moment, but can't get rid of text input. – thomas jaunism Jan 29 '16 at 02:48

score 1 · Accepted Answer · edited May 23 '17 at 12:31

I ended up just editing the code of the select2.js file.

I changed this part (around line 1810)

  Search.prototype.render = function (decorated) {
    var $search = $(
      '<li class="select2-search select2-search--inline">' +
        '<input class="select2-search__field" type="search" tabindex="-1"' +
        ' autocomplete="off" autocorrect="off" autocapitalize="off"' +
        ' spellcheck="false" role="textbox" aria-autocomplete="list" />' +
      '</li>'
    );

To this:

  Search.prototype.render = function (decorated) {
    var $search = $(
      '<li>' +
        '<input tabindex="-1"' +
        ' autocomplete="off" autocorrect="off" autocapitalize="off"' +
        ' spellcheck="false" role="textbox" aria-autocomplete="list" style="display: none" />' +
        '<p class="placeHolderText"></p>' +
      '</li>'
    );

I had to add a new placeholder in there as that got rid of the select2 placeholder. I then just added the placeholder text in with jquery.

There are also other answers HERE but they didn't work for me.

How can I use 'multiple select boxes' option in Select2 without ability to enter text?

2 Answers2