0

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>

編集: 「検索ボックスを非表示にする」に関する情報を見つけました。minimumResultsForSearch を 'infinity' に切り替えてみましたが、まだ機能しませんでした。ここに私のアプリがあります: www.gethappy.co.nz

4

2 に答える 2

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には他の回答もありますが、私にはうまくいきませんでした。

于 2016-01-31T22:29:35.277 に答える
1

プロパティminimumResultsForSearchを使用して、 として設定し-1ます。

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

例

問題はここにリストされていました

于 2016-01-29T01:10:39.463 に答える