JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<div id="container">
  <input type="search" class="search form-control" placeholder="Search files and folders" id="s">
  <div class="row asset-list" id="1">
        <div class="name col-xs-8">
          <a href="/rack/c27178a4e33d83be3cd0fb955c9b1f3b7b96fa6ashow.html?1395131765" class="file-name">show.html</a>
        </div>

        <div class="size col-xs-1">
          5.9 KB
        </div>

        <!-- <div class="col-xs-2">
          text/html
        </div> -->

        <div class="col-xs-3">
          <time data-local="time-ago" datetime="2014-03-18T08:36:05Z">March 18, 2014  8:36am</time>
          <div class="actions pull-right"> 
            <div class="share"> 
                <a href="/home/index">Share</a> 
            </div> 
            
          </div> 
        </div>
</div>
<hr />
<div class="row asset-list" id="2">
        <div class="name col-xs-8">
          <a href="/rack/4f1032b2181be5f52f2585adf9705c750cd6683enext-prev-btn.png?1395080071" class="file-name">next-prev-btn.png</a>
        </div>

        <div class="size col-xs-1">
          1.5 KB
        </div>

        <!-- <div class="col-xs-2">
          image/png
        </div> -->

        <div class="col-xs-3">
          <time data-local="time-ago" datetime="2014-03-17T18:14:31Z">March 17, 2014  6:14pm</time>
          <div class="actions pull-right"> 
            <div class="share"> 
                <a href="/home/index">Share</a> 
            </div> 
            
          </div> 
        </div>
</div>
<hr />
<div class="row asset-list" id="3">
        <div class="name col-xs-8">
          <a href="/rack/ec9dfae49b3bce8c58da7091337c25c0795649a4apple_mac_os_x_mavericks-wallpaper-1024x768.jpg?1394374377" class="file-name">apple_mac_os_x_mavericks-wallpaper-1024x768.jpg</a>
        </div>

        <div class="size col-xs-1">
          270 KB
        </div>

        <!-- <div class="col-xs-2">
          image/jpeg
        </div> -->

        <div class="col-xs-3">
          <time...

JavaScript

$(document).ready(function () {



$("#s").on("keyup click input", function () {
if (this.value.length > 0) {
  $(".row").show().filter(function () {
    return $(this).find('.name').text().toLowerCase().indexOf($("#s").val().toLowerCase()) == -1;
  }).hide();
}
else {
  $(".row").show();
}
});

});