在选择中添加图标

Question

我希望搜索图标位于最左侧，如下图所示。 fontawesome 的搜索图标是 <i class="fas fa-search"></i> 或者我们可以使用 bootstrap.

的 Glyphicons

内容：“\e003”； font-family: "Glyphicons Halflings";

我找不到启用多选时添加图标的方法。

HTML

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.bootstrap3.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>

    
    <select multiple class="form-control select-key" id="sel2" name="key-list[]">
      <option>SBI Cap</option>
      <option>PGIM MidCap</option>
      <option>Axis SmallCap</option>
      <option>Kotak Technology</option>
      <option>SBI Technology</option>
    </select>

JS

$(function () {
   $("#sel2").selectize({
    onDropdownOpen: function($dropdown) {
        if (!this.lastQuery.length) {
        this.close(); 
        this.settings.openOnFocus = false;
      }
   },   
   onItemAdd: function() {
    this.close();
   },
   onType : function (str) {
        if (str === "") {
            this.close();
        }
   }
  });
});

Answer 1

您可以在 before css psudo class 中添加图标。

$(function() {
    $("#sel2").selectize({
        onDropdownOpen: function($dropdown) {
            if (!this.lastQuery.length) {
                this.close();
                this.settings.openOnFocus = false;
            }
        },
        onItemAdd: function() {
            this.close();
        },
        onType: function(str) {
            if (str === "") {
                this.close();
            }
        }
    });
});

 .selectize-input.items.not-full.has-options:before {
 content:"\f002";
 font-family: "Font Awesome 5 Free";
 line-height: 2;
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 padding: 0 4px;
 font-weight:900;
 }
  .selectize-input.items.not-full.has-options {
 padding-left: 24px;
 }
 
   .selectize-input.items.not-full.has-options .item:first-child {
 margin-left: 20px;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.bootstrap3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />

<br>
<select multiple class="form-control select-key" id="sel2" name="key-list[]">
    <option>SBI Cap</option>
    <option>PGIM MidCap</option>
    <option>Axis SmallCap</option>
    <option>Kotak Technology</option>
    <option>SBI Technology</option>
</select>

在选择中添加图标

Add icon in selectize

javascript

jquery

selectize.js