如何在无法输入文本的情况下在 Select2 中使用“多个选择框”选项？

Posted 2023-05-07

【中文标题】如何在无法输入文本的情况下在 Select2 中使用“多个选择框”选项？

【英文标题】：How can I use 'multiple select boxes' option in Select2 without ability to enter text?

【发布时间】：2016-05-06 15:00:01

【问题描述】：

当您使用 select2“多个选择框”选项时，它会为您提供输入文本的选项。我想删除此功能，以便用户只能单击/触摸可用选项并且文本光标不会显示。

您可以在他们的示例页面上看到“多个选择框”选项：https://select2.github.io/examples.html

我的代码。 （我使用的是 Laravel 5 刀片模板）

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

编辑： 我找到了关于'Hiding the search box' 的信息。我尝试将 minimumResultsForSearch 切换为“infinity”，但它仍然不起作用。这是我的应用程序：www.gethappy.co.nz

【参考方案1】：

我最终只是编辑了 select2.js 文件的代码。

我改变了这部分（大约 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>'
    );

对此：

  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>'
    );

我不得不在那里添加一个新的占位符，因为它摆脱了 select2 占位符。然后我只是用 jquery 添加了占位符文本。

还有其他答案HERE，但它们对我不起作用。

【参考方案2】：

使用属性minimumResultsForSearch并将其设置为-1。

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

Example

问题列here

【讨论】：

谢谢，这对我不起作用？我的选择下拉菜单中有 4 个选项。也尝试将 minimumResultsForSearch 更改为 10。没用。有什么想法吗？

你能发布 html 吗？这将有助于解决问题。

添加了更多代码。它目前工作正常，但无法摆脱文本输入。