JSFiddle - React, Tailwind, and code Playground

by peteng

HTML

<div class="filter-wrap">
	<span class="clearable">
	    <input class="data_field" name="data_field" id="brands-search" placeholder="Search Brands Here" type="text"/>
    	<span class="icon_clear" style="cursor:pointer;">✘</span>
	</span>
	<div class="small-bt"><p class="common all">select all &nbsp|</p><p class="common none">&nbspunselect all</p></div>
	<div class="check-wrap" id="brands">
		<div class="check-unit">
			<input type="checkbox" class="check" />
			<p class="slide-head brandList">Samsung</p>
		</div>
        <div class="check-unit">
			<input type="checkbox" class="check" />
			<p class="slide-head brandList">Motorola</p>
		</div>
        <div class="check-unit">
			<input type="checkbox" class="check" />
			<p class="slide-head brandList">Nokia</p>
		</div>
        <div class="check-unit">
			<input type="checkbox" class="check" />
			<p class="slide-head brandList">Sony</p>
		</div>
        <div class="check-unit">
			<input type="checkbox" class="check" />
			<p class="slide-head brandList">HTC</p>
		</div>
        <div class="check-unit">
	<input type="checkbox" class="check" />
	<p class="slide-head brandList">Micromax</p>
</div>
<div class="check-unit">
	<input type="checkbox" class="check" />
	<p class="slide-head brandList">LG</p>
</div>
<div class="check-unit">
	<input type="checkbox" class="check" />
	<p class="slide-head brandList">BlackBerry</p>
</div>
<div class="check-unit">
	<input type="checkbox" class="check" />
	<p class="slide-head brandList">Apple</p>
</div>
<div class="check-unit">
	<input type="checkbox" class="check" />
	<p class="slide-head brandList">Maxx</p>
</div>
<div class="check-unit">
	<input type="checkbox" class="check" />
	<p class="slide-head brandList">Dell</p>
</div>
<div class="check-unit">
	<input type="checkbox" class="check" />
	<p class="slide-head brandList">Karbonn</p>
</div>
<div class="check-unit">
	<input type="checkbox" class="check" />
	<p class="slide-head brandList">Lenovo</p>
</div>
<div...

CSS

* {float:left;margin:0px;padding:0px;font-size:12px;}
.filter-wrap{width:250px;}
span.clearable{position: relative;width: 98%;margin: 5px 0px 0px 3px;}
#brands-search{height:20px;line-height:20px;border:1px solid rgb(170, 170, 170);color: rgb(0, 0, 0);width:90%;}
.small-bt *{color:rgb(44, 57, 108);cursor:pointer;}
.check-wrap{width:98%;margin-top:15px;}
.check-unit{width:47%;background-color: rgb(221, 221, 221);padding: 5px 0px 5px 5px;margin: 1px 0px;}
p.slide-head{font-size:11px;margin-left: 5px;}

.floatRight {float:right;}

JavaScript

var originalList = $("#brands .check-unit");
originalList.filter(":odd").addClass('floatRight');

$('.data_field').keyup(function () {
    var filter = $(this).val().toUpperCase();
    originalList.removeClass('floatRight');
    filteredList = originalList.filter(function(index) {
        var text = $(this).text();
        return text.toUpperCase().indexOf(filter) !== -1;
    });
    
    var hiddenList = originalList.not(filteredList);
    hiddenList.slideUp();
    filteredList.slideDown().filter(":odd").addClass('floatRight');
});