将select2显示为普通输入文本

时间:2017-01-21 16:39:18

标签: jquery jquery-select2 select2 typeahead

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

有没有办法放置文本输入而不是选择控件(如typeahead插件)?

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

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

enter image description here

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

enter image description here

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

enter image description here

2 个答案:

答案 0 :(得分:4)

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



$(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"/>
&#13;
&#13;
&#13;

答案 1 :(得分: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