将select2显示为普通输入文本

Question

我在我的项目中使用select2插件（最新版本4.0.2）进行自动完成。我发现select2只能应用于选择控件。 主要问题是文本输入作为此控件的第一个选项（参见下面的img）。

有没有办法放置文本输入而不是选择控件（如typeahead插件）？

部分屏幕截图（实际上您可以尝试here）

折叠（您可以在此处看到只有选定选项的标准选择html控件）

扩展（文本输入位置作为选择控件的第一个选项，如果选择折叠则隐藏文本输入）

预先输入（适用于直接输入文字，在页面上始终显示的第一行中输入查询文字）

Answer 1

希望这是你想要实现的目标。

＆＃13;

＆＃13;

$(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"    }
          ]    
});
});

＆＃13;

<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"/>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是解决方案 -

第1步选择2代码

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

第2步 添加select2.css的这个CSS结尾 -

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

请注意： 38px 是您的输入字段高度。您需要调整输入高度。

第3步 如果您需要阻止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;

完成！

DEMO

在此处查看我的自定义版本https://codepen.io/gtanim/pen/pWEdQj