jquery 将select2显示为纯输入文本

2nc8po8w  于 2023-08-04  发布在  jQuery
关注(0)|答案(3)|浏览(182)

我使用select2插件(最新版本4.0.2)在我的project自动完成。我发现select2只能用于选择控件。主要的问题是,文本输入放置为第一个选项的这个控件(见img下面).
有没有什么方法可以让文本输入代替选择控件(比如typeahead插件)?
一些截图(实际上你可以尝试here

Collapsed(您可以在这里看到只有标准的选择html控件与选定的选项)


的数据

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


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


p5cysglq

p5cysglq1#

希望这就是你想达到的目标。

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

个字符

fnx2tebb

fnx2tebb2#

解决办法是--

步骤1选择2代码

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

字符串

STEP 2将此CSS添加到select2.css的末尾-

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


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

STEP 3如果您需要防止select 2向上翻转下拉列表

未结

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

1yjd4xko

1yjd4xko3#

使用multiple的黑客可以工作,但并不优雅,并且存在设计问题。如本答案所示,selectize.js提供了一种完全按需工作的替代方案
下面是一个简单的example

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

个字符

相关问题