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网站,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似乎死了

使用方法很简单：

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

以下是如何使用和自定义的一些示例selectize