如何使用多个选择框' Select2中的选项无法输入文字?

时间:2016-01-29 00:46:16

标签: jquery jquery-select2 select2

当您使用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切换为&#39; infinity&#39;它仍然没有奏效。这是我的应用:www.gethappy.co.nz

2 个答案:

答案 0 :(得分:1)

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

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

Example

问题列在here

答案 1 :(得分:1)

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

我改变了这部分(第1810行)

 G1 :- freeze(Y, G3), Y=1.
 G2 :- freeze(Z, G4), Z=1. 

对此:

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

我必须在那里添加一个新的占位符,因为它摆脱了select2占位符。然后我用jquery添加了占位符文本。

还有其他答案HERE,但它们对我没有用。