如何为 select2 jQuery 插件制作占位符。在 StackOverflow 上有很多答案如何在那里制作占位符,但它们是关于元素的占位符的。我需要为搜索框指定一个占位符,请参见图片。
您可以使用该事件:
在这个事件中添加placeholder属性就足够了:
$(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>
我有同样的需求,最终为 Select2 插件编写了一个小扩展。
Select2
插件有一个新选项searchInputPlaceholder,用于为“搜索”输入字段设置占位符。
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
您可以使用该事件:
在这个事件中添加placeholder属性就足够了:
我有同样的需求,最终为
Select2
插件编写了一个小扩展。插件有一个新选项
searchInputPlaceholder
,用于为“搜索”输入字段设置占位符。在插件的 js 文件后面添加以下代码:
用法:
使用
searchInputPlaceholder
选项初始化 select2 插件:演示:
演示可在 JsFiddle 上找到。
2020 年 5 月 9 日更新
使用最新的 Select2 版本 (v4.0.13) 进行测试 - JsFiddle。
Github 存储库:
https://github.com/andreivictor/select2-searchInputPlaceholder