CODEWITHSUNDEEP
javascriptjqueryselectize.js
Ujjawal Bhandari
Ujjawal Bhandari

Reputation: 1372

Add icon in selectize

I want search icon at the extreme left like image shown below in selectize. Search icon of fontawesome is <i class="fas fa-search"></i> OR we can use Glyphicons of bootstrap.

content: "\e003"; font-family: "Glyphicons Halflings";

I couldn't find method to add icon when multiple selection is enabled.

search

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();
        }
   }
  });
});

Upvotes: 0

Views: 1106

Answers (1)

Danial
Danial

Reputation: 1633

You can add the icon in 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>

Upvotes: 2

Related Questions