占位符上的 Select2 字体真棒图标答案

【问题标题】：Select2 Font Awesome Icon on Placeholder占位符上的 Select2 字体真棒图标
【发布时间】：2016-05-26 02:54:40
【问题描述】：

如何在 Select2 的占位符文本前添加 FontAwesome。

这是我的 Select2 选项代码：

var placeholder = "<i class='fa fa-search'></i>  " + "Select a places";
$(".select2").select2({
    placeholder: placeholder,
    width: null
});

这是我的 HTML 代码：

<select class="form-control select2">
    <option></option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

谢谢。

【问题讨论】：

“之前”是什么意思？
选择框没有占位符属性..所以请使用第一个选项来占位符。
对不起，我的意思是图标在占位符文本的左侧。
@javedrathod，感谢您的评论，但 select2 有。
我想你想要在选择 2 之前搜索图标吧？

标签： javascript jquery twitter-bootstrap font-awesome select2

【解决方案1】：

在 Select2 选项之间声明escapeMarkup 函数，然后对placeholder 使用“搜索”图标代码（您可以在Font-Awesome Cheatsheet 页面中找到它）：

$(function() {
  var placeholder = "&#xf002 Select a place";
  $(".select2").select2({
    placeholder: placeholder,
    width: null,
    escapeMarkup: function(m) { 
       return m; 
    }
  });
});

.select2 {
  font-family: 'FontAwesome'
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>

<select class="form-control select2">
  <option></option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

【讨论】：

工作成功。谢谢！
@MarcosDiPaolo 这就是他的问题?
嗨@AlessioCantarella，是的。你有没有办法在多重选择中使用非转义占位符？
@MarcosDiPaolo 在 StackOverflow 上创建一个新问题
@AlessioCantarella 对不起，你是对的。这是我的问题：stackoverflow.com/questions/60141438/…