如何使select2占位符用于搜索输入 [英] How make select2 placeholder for search input
问题描述
如何为select2 jQuery插件制作占位符。在StackOverflow上,许多人回答了如何在那里制作占位符,但是关于元素的占位符。我需要为搜索框指定占位符,请参阅图片。
How to make placeholder for select2 jQuery plugin. On StackOverflow many answers how to make placeholder there, but they about element's placeholder. I need to specify a placeholder for the search box, see pic.
推荐答案
我有同样的需求,我最终为 Select2
插件编写了一个小扩展。
I had the same need and I had ended up writing a small extension for the Select2
plugin.
有一个插件的新选项 searchInputPlaceholder
,以便为搜索输入字段设置占位符。
There is a new option for the plugin, searchInputPlaceholder
, in order to set a placeholder for the 'search' input field.
在插件的js文件后面添加以下代码:
Add the following code right after the plugin's js file:
(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插件:
Initialize the select2 plugin with the searchInputPlaceholder
option:
$("select").select2({
// options
searchInputPlaceholder: 'My custom placeholder...'
});
演示:
JsFiddle 上的演示。
Github回购:
https ://github.com/andreivictor/select2-searchInputPlaceholder
这篇关于如何使select2占位符用于搜索输入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!