如何將html佔位符添加到select2？

我想添加一個圖標到佔位這樣如何將html佔位符添加到select2？

$("#tag_list").select2({ 
    allowClear: true, 
    placeholder: "<i class='icon-group'></i> &nbsp;&nbsp; inout your tags...", 
    tags: ['a', 'b', 'c'], 

});

但它呈現在選擇2純文本，所以如何渲染HTML文本佔位符？

來源

2013-07-27 why

是否行得通？另外，如果可能的話，將您的代碼放在小提琴中。 – Trojan

-1

function format(state){ 

if (!state.id) { 

return state.text; // optgroup 

} else { 

return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" + state.text; 

} 

} 

$("#tag_list").select2({ 

    formatResult: format, 

    formatSelection: format, 

    escapeMarkup: function(m) { return m; } 


});

http://ivaynberg.github.io/select2/

來源

2013-07-27 09:23:45

即時猜測你要使用的字體，真棒。他們與統一碼這裏的cheatsheet：http://fortawesome.github.io/Font-Awesome/cheatsheet/ 可以放置在佔位符HTML：

<input name="username" placeholder="&#xf042;">

記住添加的輸入元素：

font-family: 'FontAwesome'

這並非所有人都支持瀏覽器，所以你可能想用before元素做一個fallbackhack。

.wrapper:before { 
    font-family: 'FontAwesome'; 
    color:red; 
    position:relative; 
    content: "\f042"; 
}

末回落是實際使用的圖像是這樣的：

background-image: url(http://www.levenmetwater.nl/static/global/images/icon-search.png); 
background-position: 10px center; 
background-repeat: no-repeat;

如果你想讓它刪除焦點的圖標，補充一點：

input:focus { 
background-position: -20px center; 
text-indent: 0; 
width: 50%; 
}

來源

2014-10-02 07:32:01 vonGohren

選擇二自動轉義HTML標記。

$("#tag_list").select2({ 
allowClear: true, 
placeholder: "<i class='icon-group'></i> &nbsp;&nbsp; inout your tags...", 
tags: ['a', 'b', 'c'], 
escapeMarkup : function(markup) { 
     return markup; 
    }, // let our custom formatter work 
});

通過重寫「escapeMarkup」參數，可以迫使它呈現普通的HTML代替（通過返回轉義HTML原樣）。這將影響佔位符和選擇數據（select2將佔位符作爲任何數據處理，從而轉義它）。

欲瞭解更多信息，請查看AJAX數據例如：如果去掉引號Examples - Select2 | LoadingRemoteData

來源

2016-07-11 19:02:07 Daniel

如何將html佔位符添加到select2？

回答

相關問題