Неэкранированный заполнитель select2 при множественном выборе - PullRequest
Новая
       6

Неэкранированный заполнитель select2 при множественном выборе

0 голосов
/ 10 февраля 2020

Мне кажется, я понимаю, как заполнители работают с select2 библиотекой.

Уже некоторое время меня беспокоит то, как использовать неэкранированный заполнитель для нескольких вариантов выбора.

Причина в том, что мне нравится размещать значок в качестве заполнителя.

Для одного выбора используется тег дополнительного параметра и свойство escapeMarkup в объекте параметров select2. 

$('mySelector').select2({
    escapeMarkup: function(markup){
        return markup;
    }
});

Ничто из этого невозможно при множественном выборе, поскольку заполнитель помещается во входной тег, поэтому разметка html экранируется, и вместо значка появляется тег <i>.

Есть ли обходной путь для этого?

Ответы [ 2 ]

0 голосов
/ 20 февраля 2020

Принимая ваш предыдущий комментарий в качестве ссылки:

"Идея состоит в том, чтобы поместить удивительный значок шрифта в заполнитель и не позволить select2 избежать его, и я получаю вместо значка "

... и, если я правильно понял, вы хотите поместить значок Font Awesome на Placeholder элемента Select2 и сохранить его там, правильно?

Проверьте следующий код, где я вставляю DIV, который содержит значок Font Awesome (маленький самолет), и помещаю его поверх ввода, используемого для поиска. Даже когда вы выбираете разные элементы из выбора (это множественное выделение, как вам нужно), значок остается в заполнителе, а также по умолчанию имеет текст.

Не забудьте добавить вкладку class = " " на случай, если вы не увидите иконку. 

$(document).ready(function(){
  $("#sel1").select2({
    placeholder: 'Search here...',
    allowClear: true
  });
$(".select2-search.select2-search--inline").prepend("<div class='fab'>&#xf374;</div>");
});
select {
    width:300px;
    }
.multi {
    padding:10px;
	font-family: FontAwesome, "Open Sans", Verdana, sans-serif;
    font-style: normal;
    font-weight: 600;
    text-decoration: inherit;
}    
.top {
    position: absolute;
    left: 0px; top:0px;    
    }
<html>
<head>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- select2 -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

  <!-- select2-bootstrap4-theme -->
  <link href="https://raw.githack.com/ttskch/select2-bootstrap4-theme/master/dist/select2-bootstrap4.css" rel="stylesheet"> <!-- for live demo page -->                             
    
    
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    
    
    
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

</head>
<body>
<div class="container-fluid" style="width: 100%;">

<select class="multi fab" multiple placeholder="" data-allow-clear="1" id="sel1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
</select>
</div>
<script>

</script>
</body>
</html>
0 голосов
/ 10 февраля 2020

@ Маркос. Я сделал какое-то решение относительно заполнителя в отношении библиотеки select2 . 

<select class="select2 selectPlaceholder" multiple="multiple"></select>

<script>
  $(".selectPlaceholder").select2({
    placeholder: "Select Product",
    allowClear: true
  });
</script>

Необязательно

allowClear: true

Пожалуйста, дайте мне знать, если я прав, потому что я получил ваш вопрос, но все же у меня есть некоторые сомнения в понимании Que.

...