将 select2 显示为纯输入文本

Posted 2023-05-07

【中文标题】将 select2 显示为纯输入文本

【英文标题】：Display select2 as plain input text

【发布时间】：2017-06-06 12:22:06

【问题描述】：

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

有什么方法可以放置文本输入而不是选择控件（例如预输入插件）？

部分截图（其实你可以试试here）

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

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

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

【问题讨论】：

Select2 start with input field instead of dropdown的可能重复

@AndreiGheorghiu，不确定是否重复，但 select2 版本的主要区别。该问题于 2013 年发布，我认为 select2 ver 3.x 是实际的。但是从 select2 ver 4.x 开始，它只适用于 select html 控件

我也不确定，因为您的问题是不清楚。这就是为什么我说“可能”。除了库版本之外，您所问的内容与我链接的问题之间还有其他区别吗？

@AndreiGheorghiu，刚刚更新了问题。还附上了一些带有cmets的截图

这是您需要的吗？ $("#yourSelector").select2( placeholder: "type query here",allowClear: true); ?

【参考方案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"/>

【讨论】：

我已经试过这个技巧了。我认为它可能被用作解决方法，但我相信没有这个技巧也可以实现该选项。

sn-p 坏了。请修复它。

@dikkini 感谢您的评论。修好了！

【参考方案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;

完成！

演示

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