在搜索字段上选择2搜索图标

Question

我将 select2 与 bootstrap3 结合使用。

https://select2.github.io/examples.html

单选框

如何在搜索栏添加搜索图标？

像这样：

https://fk.github.io/select2-bootstrap-css/

这是我的Select2选项代码：

$(".select2").select2({
    theme: 'bootstrap'
});

这是我的 HTML 代码：

<select style="width:100%" class="select2">
    <optgroup label="Test-group">
        <option>test1</option>
        <option>test2</option>
    </optgroup>
</select>

谢谢你。

Answer 1

检查你的html并找到输入的css规则，然后为其添加背景，如下所示：

background: #fff url('select2.png') no-repeat 100% -22px;

Answer 2

这个帖子对我有帮助 - 8 年后，关于如何做到这一点的选择稍微多了一些，下面描述的就是我最终所做的。这将使用 jquery 将占位符值添加到 select2 下拉列表内的搜索栏，并与 bootstrap5 一起使用。

$('#your-select-id').one('select2:open', function(e) {
    $('input.select2-search__field').prop('placeholder', 'enter username or city');
});

参考： https://forums.select2.org/t/additional-placeholder-in-search-input/325