Choices Select

Javascript
Include just before the body end tag 

<!--Select scripts-->
 <script src="assets/vendor/node_modules/js/choices.min.js"></script>
 <script>
 var cSelect = document.querySelectorAll("[data-choices]");
  cSelect.forEach(el => {
    const t = { ...el.dataset.choices ? JSON.parse(el.dataset.choices) : {},
     ...{
         classNames: {
         containerInner: el.className,
         input: "form-control",
         inputCloned: "form-control-sm",
         listDropdown: "dropdown-menu",
         itemChoice: "dropdown-item",
         activeState: "show",
         selectedState: "active"
         }
 }
}
new Choices(el, t)
});
</script>
Css
Include page head tag 

<!--Select css-->
<link rel="stylesheet" href="assets/vendor/node_modules/css/choices.min.css">
HTML
Copy and paste into HTML 

<!--Basic select demo-->
<label for="chBasic" class="form-label">Basic Demo</label>
<select id="chBasic" class="form-control" data-choices='{"searchEnabled":false, "allowHTML":true,"itemSelectText":""}'>
 <option value="" disabled>Select User</option>
 <option value="Adam">Adam</option>
 <option value="Mark">Mark</option>
 <option value="John">John</option>
 <option value="Varun">Varun</option>
 <option value="Joseph">Joseph</option>
 <option value="Smith">Smith</option>
</select>
HTML
Copy and paste into HTML 
  
  <!--Custom width select demo-->
  <div class="width-14x">
   <select id="chWidth" class="form-control form-control-sm" data-choices='{"searchEnabled":false, "allowHTML":true,"itemSelectText":""}'>
    <option value="" disabled>Quantity</option>
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="03">03</option>
    <option value="04">04</option>
    <option value="05">05</option>
    <option value="06">06</option>
   </select>
</div>
HTML
Copy and paste into HTML 
  
    <!--Searchable Select Box-->
    <label for="Searchable" class="form-label">Searchable</label>
    <div>
        <select id="Searchable" class="form-control" data-choices='{"searchEnabled":true, "allowHTML":true,"itemSelectText":""}'>
            <option value="" disabled>Country</option>
            <option value="Usa">Usa</option>
            <option value="Uk">Uk</option>
            <option value="India">India</option>
            <option value="France">France</option>
            <option value="Japan">Japan</option>
            <option value="Ukrain">Ukrain</option>
            <option value="Poland">Poland</option>
            <option value="Kenya">Kenya</option>
            <option value="Sweden">Sweden</option>
            <option value="Germany">Germany</option>
        </select>
    </div>
HTML
Copy and paste into HTML 
 
    <!--Small-->
    <select id="cSizing" class="form-control-sm form-control" data-choices='{"searchEnabled":false, "allowHTML":true,"itemSelectText":""}'>
        <option value="" disabled>Select User</option>
        <option value="Adam">Adam</option>
        <option value="Mark">Mark</option>
        <option value="John">John</option>
        <option value="Varun">Varun</option>
        <option value="Joseph">Joseph</option>
        <option value="Smith">Smith</option>
    </select>
   
    <!--Default-->
    <select id="chBasic2" class="form-control" data-choices='{"searchEnabled":false, "allowHTML":true,"itemSelectText":""}'>
        <option value="" disabled>Select User</option>
        <option value="Adam">Adam</option>
        <option value="Mark">Mark</option>
        <option value="John">John</option>
        <option value="Varun">Varun</option>
        <option value="Joseph">Joseph</option>
        <option value="Smith">Smith</option>
    </select>
   
    <!--Large-->
    <select id="chBasic3" class="form-control-lg form-control" data-choices='{"searchEnabled":false,"allowHTML":true}'>
        <option value="" disabled>Select User</option>
        <option value="Adam">Adam</option>
        <option value="Mark">Mark</option>
        <option value="John">John</option>
        <option value="Varun">Varun</option>
        <option value="Joseph">Joseph</option>
        <option value="Smith">Smith</option>
    </select>

Multiple

Multiple select with Available Options

HTML
Copy and paste into HTML 
    
<!--Multiple select-->
 <input type="text" class="form-control"
            data-choices='{"silent": true,"removeItems": "true","removeItemButton": "true", "allowHTML":true}'>
        
<!--Multiple select with available options-->
 <select multiple class="form-control"
 data-choices='{"silent": true,"removeItems": "true","removeItemButton": "true", "allowHTML":true}'>
  <option value="Html">HTML</option>
  <option value="Css">Css</option>
  <option value="Bootstrap">Bootstrap</option>
  <option value="Figma">Figma</option>
 <option value="Js">Js</option>
</select>

With Image New


 <!--With Image select-->
 <select id="chImage" class="form-control choices-image">
 </select>



<script>
        //Images Array
        var selectImages = [{
                value: 'John Doe',
                label: '<img src="assets/img/avatar/6.jpg" class="rounded-pill width-3x h-auto me-2" alt=""> John Doe'
            },
            {
                value: 'Julia Roberts',
                label: '<img src="assets/img/avatar/1.jpg" class="rounded-pill width-3x h-auto me-2" alt=""> Julia Roberts'
            },
            {
                value: 'Mark Otto',
                label: '<img src="assets/img/avatar/7.jpg" class="rounded-pill width-3x h-auto me-2" alt=""> Mark Otto'
            },
            {
                value: 'Micheal Smith',
                label: '<img src="assets/img/avatar/8.jpg" class="rounded-pill width-3x h-auto me-2" alt=""> Micheal Smith'
            },

        ];
        const element = document.querySelector('.choices-image');
        const choices = new Choices(element, {
            choices: selectImages,
            values: null,
            allowHTML: true,
            itemSelectText: "",
            classNames: {
                containerInner: element.className,
                input: 'form-control',
                inputCloned: 'form-control-xs',
                listDropdown: 'dropdown-menu',
                itemChoice: 'dropdown-item',
                activeState: 'show',
                selectedState: 'active',
            },
        });
</script>

Accelerate your business online

Build any type of landing page ease.