如何為 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