如何为搜索输入制作 select2 占位符

Posted 2023-05-07

【中文标题】如何为搜索输入制作 select2 占位符

【英文标题】：How make select2 placeholder for search input

【发布时间】：2018-01-30 19:55:44

【问题描述】：

如何为 select2 jQuery 插件制作占位符。在 *** 上有很多答案如何在那里制作占位符，但它们是关于元素的占位符的。我需要为搜索框指定一个占位符，见图片。

【问题讨论】：

到目前为止你做了什么？你试过这个***.com/questions/25049731/…

$country.select2( placeholder: __("Select your country"), //todo add search placeholder __('Start typing…') );

你可以试试这样的，(".select2-search__field").attr("placeholder",'your placeholder');

【参考方案1】：

我也有同样的需求，最后我为 Select2 插件编写了一个小扩展。

插件有一个新选项searchInputPlaceholder，用于为“搜索”输入字段设置占位符。

在插件的js文件后添加如下代码：

(function($) 

    var Defaults = $.fn.select2.amd.require('select2/defaults');

    $.extend(Defaults.defaults, 
        searchInputPlaceholder: ''
    );

    var SearchDropdown = $.fn.select2.amd.require('select2/dropdown/search');

    var _renderSearchDropdown = SearchDropdown.prototype.render;

    SearchDropdown.prototype.render = function(decorated) 

        // invoke parent method
        var $rendered = _renderSearchDropdown.apply(this, Array.prototype.slice.apply(arguments));

        this.$search.attr('placeholder', this.options.get('searchInputPlaceholder'));

        return $rendered;
    ;

)(window.jQuery);

用法：

使用 searchInputPlaceholder 选项初始化 select2 插件：

$("select").select2(
    // options 
    searchInputPlaceholder: 'My custom placeholder...'
);

演示：

JsFiddle 上提供演示。

---

2020 年 5 月 9 日更新

使用最新的 Select2 版本 (v4.0.13) - JsFiddle 进行测试。

---

Github 存储库：

https://github.com/andreivictor/select2-searchInputPlaceholder

【讨论】：

您好，感谢上面漂亮的代码，但是这直接呈现了 select2 搜索中的整个标记。有什么解决方法吗？我什至需要在占位符之前添加 fontawesome 图标。

你为什么不用css呢？您可以设置.select2-search 元素的样式并使用:before 或:after 插入一个图标

示例：jsfiddle.net/3jsr4ywh/21

【参考方案2】：

您可以使用该事件：

select2:opening：在下拉菜单打开之前触发。可以防止此事件

在这个事件中添加占位符属性就足够了：

$(this).data('select2').$dropdown.find(':input.select2-search__field').attr('placeholder', 'My Placeholder')

$('select').select2(
    placeholder: 'Select an option'
).on('select2:opening', function(e) 
    $(this).data('select2').$dropdown.find(':input.select2-search__field').attr('placeholder', 'My Placeholder')
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>


<select style="width: 100%;">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

【讨论】：

它工作正常。谢谢你。但它看起来像一个黑客。每次我下拉选择时都会触发此功能。

@LukasPierce 就像评论中建议的那样，您不能再使用最新版本的 $(".hidden")..... 因为下拉菜单是在每次打开select2时都会飞...您可以自己尝试每次都创建容器。谢谢

@gaetanoM 在我的 Select2 4.1.0 上运行良好

@PavelBariev 我很高兴

【参考方案3】：

使用事件select2:open。

$('#mySelect').select2().on('select2:open', function(e)
    $('.select2-search__field').attr('placeholder', 'your placeholder');
)

【讨论】：

可能有多个 select2 元素。是否可以在更改一个搜索栏的同时避免影响他人？

【参考方案4】：

你必须添加类

disabled selected hidden

到 select 的第一个选项元素