Значок Select2 Font Awesome на заполнителе

Как добавить FontAwesome перед текстом-заполнителем в Select2.

Это мой код опции 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>

Спасибо.


javascript jquery twitter-bootstrap font-awesome select2
person cocksparrer    schedule 15.02.2016    source источник
comment
что ты имеешь в виду под "до"?   -  person Jonas    schedule 15.02.2016
comment
Поле выбора не имеет свойства заполнителя... поэтому используйте первый вариант для заполнителя.   -  person JavidRathod    schedule 15.02.2016
comment
Извините, я имею в виду, что значок находится слева от текста-заполнителя.   -  person cocksparrer    schedule 15.02.2016
comment
@javedrathod, спасибо за комментарий, но у select2 он есть.   -  person cocksparrer    schedule 15.02.2016
comment
Я думаю, вам нужен значок поиска перед выбором 2, верно?   -  person JavidRathod    schedule 15.02.2016
comment
stackoverflow.com/questions/19350291/ это может быть полезно. :)   -  person Ajay Makwana    schedule 15.02.2016
comment
@javedrathod, да. но я надеюсь, что его можно будет отредактировать, чтобы когда-нибудь я мог заменить его другим значком.   -  person cocksparrer    schedule 15.02.2016
comment
<i class='fa fa-search'></i> <select><option>test</option></select> вот так   -  person JavidRathod    schedule 15.02.2016
comment
@AjayMakwana, спасибо, я был там. к сожалению, как сказал javedrathod, поле выбора не имеет свойства заполнителя. эта страница, на которую вы ссылаетесь, предназначена для поля ввода.   -  person cocksparrer    schedule 15.02.2016
comment
@cocksparrer взгляните на мой ответ.   -  person Alessio Cantarella    schedule 15.02.2016

Ответы (1)


arrow_upward
10
arrow_downward

Объявите функцию escapeMarkup между параметрами Select2, затем используйте код значка «поиск» (вы можете найти его в страницу Font-Awesome Cheatsheet) для placeholder:

$(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>

person Alessio Cantarella    schedule 15.02.2016
comment
Работал успешно. Спасибо! - person cocksparrer; 15.02.2016
comment
@MarcosDiPaolo, это был случай его вопроса ???? - person Alessio Cantarella; 08.02.2020
comment
привет @AlessioCantarella, да. У вас есть способ использовать неэкранированный заполнитель в множественном выборе? - person Marcos Di Paolo; 09.02.2020
comment
@MarcosDiPaolo создайте новый вопрос на StackOverflow - person Alessio Cantarella; 09.02.2020
comment
@AlessioCantarella извините, вы правы. Вот мой вопрос: stackoverflow.com /вопросы/60141438/ - person Marcos Di Paolo; 10.02.2020