SO - 17939265

by Arun P Johny

HTML

<input class="search-filter" type="text"/>
<form autocomplete="off" id="city-search-form" name="city-search-form" action="" method="">
    <div id="list" class="multiselect">
        <input id="city-id-1" class="css-checkbox" type="checkbox" />
        <label for="city-id-1" name="" class="css-label">abc</label>
        
        <input id="city-id-2" class="css-checkbox" type="checkbox" />
        <label for="city-id-2" name="" class="css-label">bce</label>
        
        <input id="city-id-3" class="css-checkbox" type="checkbox" />
        <label for="city-id-3" name="" class="css-label">cde</label>
        
        <input id="city-id-3-1" class="css-checkbox" type="checkbox" />
        <label for="city-id-3-1" name="" class="css-label">cde1 desk</label>
        
        <input id="city-id-4" class="css-checkbox" type="checkbox" />
        <label for="city-id-4" name="" class="css-label">rgp</label>
    </div>
</form>

JavaScript

function listFilter(list, input) {
    var $lbs = list.find('.css-label');
    
    function filter(){
        var regex = new RegExp('\\b' + this.value);
        var $els = $lbs.filter(function(){
            return regex.test($(this).text());
        });
        $lbs.not($els).hide().prev().hide();
        $els.show().prev().show();
    };
    
    input.keyup(filter).change(filter)
}

jQuery(function($){
    listFilter($('#list'), $('.search-filter'))
})