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

Posted 2023-03-05

【中文标题】占位符上的 Select2 字体真棒图标

【英文标题】：Select2 Font Awesome Icon on Placeholder

【发布时间】：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 之前搜索图标吧？

【参考方案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 在 *** 上创建一个新问题

@AlessioCantarella 对不起，你是对的。这是我的问题：***.com/questions/60141438/…