JSFiddle - React, Tailwind, and code Playground

by Amir Sharifian

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="brand-search">
<input type="text" placeholder="جستجوی برند">
</div>
<div class="row" id="allbrands">
						<div class="col-lg-2 col-md-2 col-sm-3">
					<div class="om-brands-page-item">
						<div class="om-va-helper"></div>
						<a href="http://ordme.com/brand/acm" alt="ACM" title="ACM"><img src="http://ordme.com/media/catalog/category/logo-acm_1.jpg" alt="ACM"></a>
					</div>
				</div> 
								<div class="col-lg-2 col-md-2 col-sm-3">
					<div class="om-brands-page-item">
						<div class="om-va-helper"></div>
						<a href="http://ordme.com/brand/antonio-banderas" alt="Antonio Banderas" title="Antonio Banderas"><img src="http://ordme.com/media/catalog/category/an.jpg" alt="Antonio Banderas"></a>
					</div>
				</div> 
								<div class="col-lg-2 col-md-2 col-sm-3">
					<div class="om-brands-page-item">
						<div class="om-va-helper"></div>
						<a href="http://ordme.com/brand/avene" alt="Avene" title="Avene"><img src="http://ordme.com/media/catalog/category/avene.png" alt="Avene"></a>
					</div>
				</div> 
								<div class="col-lg-2 col-md-2 col-sm-3">
					<div class="om-brands-page-item">
						<div class="om-va-helper"></div>
						<a href="http://ordme.com/brand/babyliss" alt="BaByliss" title="BaByliss"><img src="http://ordme.com/media/catalog/category/logobabyliss.jpg" alt="BaByliss"></a>
					</div>
				</div> 
								<div class="col-lg-2 col-md-2 col-sm-3">
					<div class="om-brands-page-item">
						<div class="om-va-helper"></div>
						<a href="http://ordme.com/brand/bailleul-biorga" alt="Bailleul Biorga" title="Bailleul Biorga"><img src="http://ordme.com/media/catalog/category/logo-biorga.jpg" alt="Bailleul Biorga"></a>
					</div>
				</div> 
								<div class="col-lg-2 col-md-2 col-sm-3">
					<div class="om-brands-page-item">
						<div class="om-va-helper"></div>
						<a href="http://ordme.com/brand/bioderma"...

CSS

input{
      height: 30px;
    border: 1px solid #ddd;
    color: #666;
    outline: none !important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

JavaScript

$(document).ready(function() {
     $("input").keyup(function(){
        var srt_search = $(this).val().toLowerCase();
        if(str_search.length > 2){
          $('#allbrands img').each(function() {
          	var img_title = $(this).attr('title').toLowerCase();
          	if(img_title === srt_search || img_title.indexOf(srt_search) >= 0 || srt_search.indexOf(img_title) >= 0){
            
            }
          });
        }
     });
 });