将select2显示为普通输入文本

Question

我正在使用最新版本的select2插件（4.0.2）来实现自动完成。我发现只能将select2应用于选择控件。主要问题是文本输入框被放置在该控件的第一个选项中（请参见下面的图片）。

是否有任何方法可以将文本输入框放置在选择控件之前（例如typeahead插件）？

以下为一些截图（您实际上可以在这里尝试它） 折叠（您只能在此处看到带有所选选项的标准选择html控件） 展开（文本输入框作为选择控件的第一个选项，如果选择折叠，则隐藏文本输入框） Typeahead（直接应用于输入文本，在始终显示在页面上的第一行中输入查询文本）

- Adel Nazirov

---

可能是Select2从输入字段开始而不是下拉列表的重复问题。 - tao

@AndreiGheorghiu，不确定是否存在重复，但主要区别在于select2的版本。该问题发布于2013年，我认为当时的select2 ver 3.x是最新的版本。但自从select2 ver 4.x以后，它仅适用于select html控件。 - Adalyat Nazirov

我也不确定，因为你的问题不够清晰。这就是为什么我说“可能”的原因。除了库版本之外，你所问的问题和我链接的那个问题之间还有其他区别吗？ - tao

@AndreiGheorghiu，刚刚更新了问题。还附上了一些带有注释的截图。 - Adalyat Nazirov

这是你需要的吗？$("#yourSelector").select2({ placeholder: "在此输入查询",allowClear: true});？ - tao

@AndreiGheorghiu，输入文本仍然显示为第一个选项，并在控件折叠时隐藏，是吗？ - Adalyat Nazirov

Answer 1

希望这正是您想要实现的。

$(document).ready(function() {
$('#myInputEle').select2({
    width: '100%',
    allowClear: true,
    multiple: true,
    maximumSelectionSize: 1,
    placeholder: "Start typing",
    data: [
            { id: 1, text: "Nikhilesh"},
            { id: 2, text: "Raju"    }
          ]    
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/select2/3.4.8/select2.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/select2/3.4.8/select2.css" />

<input type="text" id="myInputEle"/>

- Nikhilesh Shivarathri

---

我已经尝试过这个技巧了。我觉得它可以作为一种变通方法，但我相信可以在不使用这个技巧的情况下实现该选项。 - Adalyat Nazirov

代码片段出现问题，请修复。 - dikkini

@dikkini 感谢您的评论。已修复！ - Nikhilesh Shivarathri

Answer 2

这里是解决方案 -

步骤1 选择 Select2 代码。

$('#input').select2();

步骤2 在select2.css的末尾添加以下CSS代码 -

.select2-dropdown--below {
  top: -38px; }

请注意：38px 是您的输入框高度。您需要调整输入框的高度。 第三步：如果您需要防止 select2 将下拉菜单向上翻转

打开

select2.js

找到

var enoughRoomAbove = viewport.top < (offset.top - dropdown.height);
var enoughRoomBelow = viewport.bottom > (offset.bottom + dropdown.height);

替换为

 var enoughRoomBelow = true;
 var enoughRoomAbove = false;

完成！

演示

在这里查看我的定制版本 https://codepen.io/gtanim/pen/pWEdQj

- MD JAHIRUL ISLAM

Answer 3

使用“多个”方法的黑客可行，但不够优雅且存在设计问题。正如答案所示，selectize.js提供了一种完全符合要求的替代方案。

这里是一个简单的示例。

$('#normalize').selectize();

<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js"></script>
<select id="normalize">
  <option value=""></option>
  <option value="1">Awesome</option>
  <option value="2">Beast</option>
  <option value="3">Compatible</option>
  <option value="4">Thomas Edison</option>
  <option value="5">Nikola</option>
  <option value="6">Selectize</option>
  <option value="7">Javascript</option>
</select>

- Sébastien Gicquel