Features:

• A custom image or icon for each option
• Works with original selection element.
• Select multiple options just like inserting tags.
• Live search.

How to make use of it:

1. Load the pureScriptSelect’s JavaScript and CSS information within the HTML file.

<link rel=”stylesheet” href=”style.css” />
<script src=”script.js”></script>

2. Add customized photographs to the chosen choices.

<div class="directorist-select" id="selectImg">
  <select name="" >
    <option value="">Select Item</option>
    <option img='1.svg' value="alom">Alom</option>
    <option img='2.png' value="basir">Basir</option>
    <option img='3.svg' value="asad">Asad</option>
    <option img='4.svg' value="barek">Barek</option>
  </select>
</div>

pureScriptSelect('#selectImg');

3. Or add customized icons (Font Awesome in this instance) to the choice choices.

<div class="directorist-select" id="selectIcon">
  <select name="" >
    <option value="">Select Item</option>
    <option icon="fas fa-check" value="alom">Alom</option>
    <option icon="fas fa-check" value="basir">Basir</option>
    <option icon="fas fa-check" value="asad">Asad</option>
    <option icon="fas fa-check" value="barek">Barek</option>
  </select>
</div>

pureScriptSelect('#selectIcon');

4. Add a search field to the choice that permits the customer to filter via the choices.

<div class="directorist-select" id="selectIcon" data-isSearch="true">
  <select name="" >
    <option value="">Select Item</option>
    <option icon="fas fa-check" value="alom">Alom</option>
    <option icon="fas fa-check" value="basir">Basir</option>
    <option icon="fas fa-check" value="asad">Asad</option>
    <option icon="fas fa-check" value="barek">Barek</option>
  </select>
</div>

5. Convert a multi-select right into a tags input.

<div class="directorist-select directorist-select-multi" id="multiSelect" data-isSearch="true" data-multiSelect='[{value: "abul", key: 0}]' data-max="5">
  <select name="mySelect" >
    <option value="">Select Item</option>
    <option value="abul">Abul</option>
    <option value="bacco">Bacco</option>
    <option value="bodri">Bodri</option>
    <option value="canmia">Canmia</option>
    <option value="choncol">Choncol</option>
    <option value="condon">Condon</option>
    <option value="chalek">Chalek</option>
    <option value="deloar">Deloar</option>
    <option value="dulon">Dulon</option>
    <option value="dipu">Dipu</option>
    <option value="dulal">Dulal</option>
  </select>
</div>

pureScriptSelect('#multiSelect');

Advanced Select Box Enhancement Library, pure Script Select Plugin/Github

See Demo And Download