如何為搜尋輸入新增select2的佔位符
P粉521697419
P粉521697419 2023-10-22 22:01:07
0
2
680

如何為 select2 jQuery 外掛程式製作佔位符。在 StackOverflow 上有很多答案如何在那裡製作佔位符,但它們是關於元素的佔位符的。我需要為搜尋框指定一個佔位符,請參見圖片。

P粉521697419
P粉521697419

全部回覆(2)
P粉939473759

您可以使用該事件:

在這個事件中加入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>
P粉311089279

我有相同的需求,最後為 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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板