多个选择上的非转义 select2 占位符

Question

我想我了解占位符如何在select2库中工作。

有件事已经困扰我一段时间了，如何在多个选择中使用非转义占位符。

原因是我喜欢在占位符处放置一个图标。

escapeMarkup在select2选项对象中使用附加选项标记和属性escapeMarkup 。

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

由于占位符放置在输入标记处，因此在多次选择时这一切都不可能，因此 html 标记被转义，您将获得<i>标记而不是图标。

有解决方法吗？

Answer 1

@Marcos 我已经做了一些关于select2 库占位符的解决方案。

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

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

可选的

允许清除：真

请让我知道我是否正确，因为我得到了你的问题，但我仍然对理解 Que 有一些疑问。

Answer 2

以您之前的评论作为参考：

“这个想法是在占位符上放置一个字体真棒图标并防止 select2 转义它，我得到的是 i 标签而不是图标”

...如果我理解正确，您想在 Select2 元素的占位符上放置一个 Font Awesome 图标并将其保留在那里，对吗？

检查以下代码，其中我插入了一个包含 Font Awesome 图标（小飞机）的 DIV，并将其放置在用于搜索的 Input 之上。 即使您从“选择”中选择不同的项目（根据需要是多选），图标仍保留在占位符中，并且默认情况下还有文本。

请记住添加class="tab"以防您看不到图标。

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