Select2はドロップダウンではなく入力フィールドで開始します

Question

私はjsライブラリを使用します select2 。これは私が今持っているもののスクリーンショットです：
開始：

ドロップダウンをクリックします：

直接ドロップダウンリストではなく、入力フィールドを開始することは可能ですか？ select2サイトで見つけることができるので、それが可能であることを知っています。例は次のとおりです。 

しかし、ドキュメントは非常に簡単です。これは私が今持っているものです：

<input type="text" name="questions[question1]" id="question1" class="question1" style="width:500px"/>

function createQuestionTags(data, question_number){
  $(".question" + question_number).select2({
    createSearchChoice: function (term, data) {
      if ($(data).filter(function () {
        return this.text.localeCompare(term) === 0;
      }).length === 0) {
        return {
          id: term,
          text: term
        };
      }
    },
    data: data,
    placeholder: "Enter Question",
    allowClear:true
  });
}

（データはajax呼び出しから受信されます）

Answer 1

この例では、実際には複数選択または複数値のドロップダウンボックスが表示されています。コードで使用しているような単一の値のドロップダウンボックスではありません。 Select2 Webサイトでは、select2は複数選択ボックスを使用しようとしていることを検出し、デフォルト（ドロップダウン矢印など）の代わりにそのスタイルを自動的に適用します。

実際に単一の値のドロップダウンボックスが必要な場合、通常の入力ボックスのように見えるように、複数選択の書式設定で表示する直接的な方法はありません。 CSSクラスを追加または削除することで、それを偽造する方法があるかもしれません。少し遊んでみましたが、見つかりませんでした。

書式設定、検索ボックス、または複数選択機能（私は推測します）は必要ないので、おそらくselect2ライブラリを使用する必要はありません。

更新：これをしようとする最初の人ではないようです。彼らはこの機能を追加する予定ですが、しばらく時間がかかるかもしれません： https://github.com/ivaynberg/select2/issues/1345

Answer 2

私が思い付く唯一の回避策は、両方のmultiple: trueおよびmaximumSelectionSize: 1セットアップ時。

ここに私の例を参照してください： http://jsfiddle.net/DanEtchy/Lnf8j/

Answer 3

これは、新しい選択アダプターを使用したSelect2 4.0.0で可能です。 SingleSelectionをMultipleSelection（関連するデコレータを含む）と交換することができ、期待どおりに動作するはずです。

$.fn.select2.AMD.require([
  'select2/selection/multiple',
  'select2/selection/search',
  'select2/dropdown',
  'select2/dropdown/attachBody',
  'select2/dropdown/closeOnSelect',
  'select2/compat/containerCss',
  'select2/utils'
], function (MultipleSelection, Search, Dropdown, AttachBody, CloseOnSelect, ContainerCss, Utils) {
  var SelectionAdapter = Utils.Decorate(
    MultipleSelection,
    Search
  );
  
  var DropdownAdapter = Utils.Decorate(
    Utils.Decorate(
      Dropdown,
      CloseOnSelect
    ),
    AttachBody
  );
  
  $('.inline-search').select2({
    dropdownAdapter: DropdownAdapter,
    selectionAdapter: SelectionAdapter
  });
  
  $('.dropdown-search').select2({
    selectionAdapter: MultipleSelection
  });
  
  $('.autocomplete').select2({
    dropdownAdapter: DropdownAdapter,
    selectionAdapter: Utils.Decorate(SelectionAdapter, ContainerCss),
    containerCssClass: 'select2-autocomplete'
  });
});

.select2-selection__choice__remove {
  display: none !important;
}

.select2-container--focus .select2-autocomplete .select2-selection__choice {
  display: none;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>

<p>With an inline search box</p>

<select style="width: 200px" class="inline-search">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<p>With the search box in the dropdown</p>

<select style="width: 200px" class="dropdown-search">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<p>With the selection hidden when it is focused</p>

<select style="width: 200px" class="autocomplete">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

デフォルトでは、Select2はドロップダウンを設定し、（選択コンテ​​ナの代わりに）検索を行います。複数選択を完全にエミュレートする場合は、これをオーバーライドする必要があります。

Answer 4

の代わりに Select2より良い選択は selectize であるためSelect2と思われる dead

sage は簡単です：

$('select').selectize(options);

ここ はselectizeの使用方法とカスタマイズ方法の例の数です

Answer 5

私の場合、通常のドロップダウンリストのように機能するのではなく、ドロップダウンからのユーザーの選択がドロップダウンの下のリストに表示されるようにしました。だからこの回避策は私のために働いた：

$('#myselect').select2({
    multiple:true
})
.on('select2:select', function (e) {
    //clear the input box after a selection is made
    $(this).val([]).trigger('change');
});

もちろん、通常のselect2複数選択リストの場合のように、select2の入力ボックスで選択したアイテムを選択したままにしたい場合は機能しません。

Answer 6

Bootstrap=スタイリング、シンプルだが機能的：

var elements = $(document).find('select.form-control');
for (var i = 0, l = elements.length; i < l; i++) {
  var $select = $(elements[i]), $label = $select.parents('.form-group').find('label');
  
  $select.select2({
    allowClear: false,
    placeholder: $select.data('placeholder'),
    minimumResultsForSearch: 0,
    theme: 'bootstrap',
                width: '100%' // https://github.com/select2/select2/issues/3278
  });
  
  // Trigger focus
  $label.on('click', function (e) {
    $(this).parents('.form-group').find('select').trigger('focus').select2('focus');
  });
  
  // Trigger search
  $select.on('keydown', function (e) {
    var $select = $(this), $select2 = $select.data('select2'), $container = $select2.$container;
    
    // Unprintable keys
    if (typeof e.which === 'undefined' || $.inArray(e.which, [0, 8, 9, 12, 16, 17, 18, 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 44, 45, 46, 91, 92, 93, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 123, 124, 144, 145, 224, 225, 57392, 63289]) >= 0) {
      return true;
    }

    // Already opened
    if ($container.hasClass('select2-container--open')) {
      return true;
    }

    $select.select2('open');

    // Default search value
    var $search = $select2.dropdown.$search || $select2.selection.$search, query = $.inArray(e.which, [13, 40, 108]) < 0 ? String.fromCharCode(e.which) : '';
    if (query !== '') {
      $search.val(query).trigger('keyup');
    }
  });

  // Format, placeholder
  $select.on('select2:open', function (e) {
                var $select = $(this), $select2 = $select.data('select2'), $dropdown = $select2.dropdown.$dropdown || $select2.selection.$dropdown, $search = $select2.dropdown.$search || $select2.selection.$search, data = $select.select2('data');
    
    // Above dropdown
    if ($dropdown.hasClass('select2-dropdown--above')) {
      $dropdown.append($search.parents('.select2-search--dropdown').detach());
    }

    // Placeholder
    $search.attr('placeholder', (data[0].text !== '' ? data[0].text : $select.data('placeholder')));
  });
}

/* !important not needed with less */

.form-group {
  padding: 25px;
}

.form-group.above {
  position: absolute;
  bottom: 0; left: 0; right: 0;
}

.select2-container--open .select2-selection {
    box-shadow: none!important;
}

.select2-container--open .select2-selection .select2-selection__arrow {
    z-index: 9999; /* example */
}

.select2-dropdown {
  /* .box-shadow(@form-control-focus-box-shadow); (from select2-boostrap */
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  
  /* border-color: @input-border-focus; */
  border-color: #66afe9;
  border-top-width: 1px!important;
  border-top-style: solid!important;
  /* border-top-left-radius: @input-border-radius; */
  border-top-left-radius: 4px!important;
  /* border-top-right-radius: @input-border-radius; */
  border-top-right-radius: 4px!important;
  
  /* margin-top: -@input-height-base; */
  margin-top: -34px!important;
}

.select2-dropdown .select2-search {
    padding: 0;
}

.select2-dropdown .select2-search .select2-search__field {
  
  /* !important not needed using less */
  border-top: 0!important;
  border-left: 0!important;
  border-right: 0!important;
  border-radius: 0!important;
  
  /* padding: @padding-base-vertical @padding-base-horizontal; */
  padding: 6px 12px;
  
  /* height: calc(@input-height-base - 1px); */
  height: 33px;
}

.select2-dropdown.select2-dropdown--above {
  /* border-bottom: 1px solid @input-border-focus; */
  border-bottom: 1px solid #66afe9!important;
  /* border-bottom-left-radius: @input-border-radius; */
  border-bottom-left-radius: 4px!important;
  /* border-bottom-right-radius: @input-border-radius; */
  border-bottom-right-radius: 4px!important;
  /* margin-top: @input-height-base; */
  margin-top: 34px!important;
}

.select2-dropdown.select2-dropdown--above .select2-search .select2-search__field {
  /* border-top: 1px solid @input-border; */
  border-top: 1px solid #66afe9!important;
  border-bottom: 0!important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet"/>
<link href="https://select2.github.io/select2-bootstrap-theme/css/select2-bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script>
<div class="form-group">
  <label class="control-label">Below example (click label to focus)</label>
  <select class="form-control" id="select2-single-box" name="select2-single-box" data-placeholder="Pick your choice" data-tabindex="1">
    <option></option>
    <option value="1">First choice</option>
    <option value="2">Second choice</option>
    <option value="3">Third choice</option>
    <option value="4">Fourth choice</option>
    <option value="5">Fifth choice</option>
    <option value="6">Sixth choice</option>
    <option value="7">Seventh choice</option>
    <option value="8">Eighth choice</option>
    <option value="9">Ninth choice</option>
  </select>
</div>
<div class="form-group above">
  <label class="control-label">Above example (click label to focus)</label>
  <select class="form-control" id="select2-single-box" name="select2-single-box" data-placeholder="Pick your choice" data-tabindex="2">
    <option></option>
    <option value="1">First choice</option>
    <option value="2">Second choice</option>
    <option value="3">Third choice</option>
    <option value="4">Fourth choice</option>
    <option value="5">Fifth choice</option>
    <option value="6">Sixth choice</option>
    <option value="7">Seventh choice</option>
    <option value="8">Eighth choice</option>
    <option value="9">Ninth choice</option>
  </select>
</div>

Select2のminimumInputLength: 1オプションは、フォーカス/オープン時にドロップダウンを非表示にすることができます...

更新：コードのクリーンアップ。フォーカスでドロップダウンを開かないでください。

Answer 7

これらのプロパティを使用

$('#placeSelect').select2({
width: '100%',
allowClear: true,
multiple: true,
maximumSelectionSize: 1,   
});

ドロップダウンのonchangeイベントでこの関数を呼び出すだけです

function ResentForMe(){
var _text=$('.select2-selection__rendered li:first-child').attr('title');
$('.select2-selection__rendered li:first-child').remove();
$('.select2-search__field').val(_text);
$('.select2-search__field').css('width','100%');
}

注：「複数」属性を選択から削除します

Answer 8

マット、）

この作品

 $（ '。search-town-flat'）。select2（{
 multiple：true、
 placeholder： "値を入力"、
 allowClear：true、 
 maximumSelectionLength：2、
 theme： "classic" 
}）。on（ 'select2：select'、function（e）{
 $（this）。 val（[]）。trigger（ 'change'）; 
 $（this）.val（[e.params.data.id]）。trigger（ "change"）; 
}） ; 

Answer 9

$.fn.select2.AMD.require([
  'select2/selection/multiple',
  'select2/selection/search',
  'select2/dropdown',
  'select2/dropdown/attachBody',
  'select2/dropdown/closeOnSelect',
  'select2/compat/containerCss',
  'select2/utils'
], function (MultipleSelection, Search, Dropdown, AttachBody, CloseOnSelect, ContainerCss, Utils) {
  var SelectionAdapter = Utils.Decorate(
    MultipleSelection,
    Search
  );
  
  var DropdownAdapter = Utils.Decorate(
    Utils.Decorate(
      Dropdown,
      CloseOnSelect
    ),
    AttachBody
  );
  
  $('.inline-search').select2({
    dropdownAdapter: DropdownAdapter,
    selectionAdapter: SelectionAdapter
  });
  
  $('.dropdown-search').select2({
    selectionAdapter: MultipleSelection
  });
  
  $('.autocomplete').select2({
    dropdownAdapter: DropdownAdapter,
    selectionAdapter: Utils.Decorate(SelectionAdapter, ContainerCss),
    containerCssClass: 'select2-autocomplete'
  });
});

.select2-selection__choice__remove {
  display: none !important;
}

.select2-container--focus .select2-autocomplete .select2-selection__choice {
  display: none;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>

<p>With an inline search box</p>

<select style="width: 200px" class="inline-search">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<p>With the search box in the dropdown</p>

<select style="width: 200px" class="dropdown-search">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<p>With the selection hidden when it is focused</p>

<select style="width: 200px" class="autocomplete">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>