Dropdown multi select

by amitava82

HTML

<button class="selectOpen">Select</button>
<div class="multiselect">
    <input class="search" type="text" />
<ul class="options">
    <li><input type="checkbox" /> Option 1</li>
    <li><input type="checkbox" /> ption 2</li>
    <li><input type="checkbox" /> tion 3</li>
    <li><input type="checkbox" /> ion 4</li>
    <li><input type="checkbox" /> n 5</li>
    <li><input type="checkbox" /> tion 6</li>
    <li><input type="checkbox" /> Oton 7</li>
    <li><input type="checkbox" /> ptin 8</li>
</ul>
</div>

CSS

.multiselect {
border: 1px solid #DDD;
width: 200px;
height: 300px;
 overflow: auto;   
    display: none;
}
.search{width: 98%}

JavaScript

$(function() {
    
    $('.selectOpen').click(function(){
        $('.multiselect').toggle();
    })
        
    $('.search').on('keyup', function() {
        var k = $(this).val().toUpperCase();

        $('.options li').each(function(i, e) {
            //console.log($(e).text().toUpperCase())
            var self = $(e);
            self.text().toUpperCase().indexOf(k) >= 0 ? self.show() : self.hide();
        })
    });
});