Front End Search Feature

front-end-search-feature.markdown

Front End Search Feature

A Pen by Chase Harrison on CodePen.

License.

index.html

<label for="searchFilter">Filter Results:</label>
<input type="text" id="searchFilter" />

<div class="projectsWrapper flexbox">
  <div class="project flexbox">
    <div class="projectStatus" style="background-color: rgb(123, 43, 218);">
      <span class="icon"><i class="fas fa-redo"></i></span>
      <span>
In Progress</span>
    </div>
    <div class="caption">
      <span style="font-size: 1.125em; text-transform: uppercase; font-weight: 500; color: #676767;">
Chase Strom Testing</span>
    </div>
    <div class="ownerList">
      <span class="ownerTitle">Owners:</span>
      <span class="ownerName">
<span>
Chase</span>
      <span>
Jodi</span>
      </span>
    </div>

    <a href="/projects/5c0c0a878ca77204b663b7e4" class="myBtn">More Info</a>
  </div>
  <div class="project flexbox">
    <div class="projectStatus" style="background-color: rgb(50, 50, 50);">
      <span class="icon"><i class="far fa-hand-paper"></i></span>
      <span>
On Hold</span>
    </div>
    <div class="caption">
      <span style="font-size: 1.125em; text-transform: uppercase; font-weight: 500; color: #676767;">
Intergration Matrix</span>
    </div>
    <div class="ownerList">
      <span class="ownerTitle">Owners:</span>
      <span class="ownerName">
<span>
Justin</span>
      </span>
    </div>

    <a href="/projects/5baef27a31bf5f001fbc0b38" class="myBtn">More Info</a>
  </div>
  <div class="project flexbox">
    <div class="projectStatus" style="background-color: rgb(50, 50, 50);">
      <span class="icon"><i class="far fa-hand-paper"></i></span>
      <span>
On Hold</span>
    </div>
    <div class="caption">
      <span style="font-size: 1.125em; text-transform: uppercase; font-weight: 500; color: #676767;">
Strom Bug Fix</span>
    </div>
    <div class="ownerList">
      <span class="ownerTitle">Owners:</span>
      <span class="ownerName">
<span>
Justin</span>
      </span>
    </div>

    <a href="/projects/5bede20ae037d50021d73095" class="myBtn">More Info</a>
  </div>
  <div class="project flexbox">
    <div class="projectStatus" style="background-color: rgb(0, 107, 201);">
      <span class="icon"><i class="far fa-hourglass"></i></span>
      <span>
Awaiting Review</span>
    </div>
    <div class="caption">
      <span style="font-size: 1.125em; text-transform: uppercase; font-weight: 500; color: #676767;">
Strom Changes Needed</span>
    </div>
    <div class="ownerList">
      <span class="ownerTitle">Owners:</span>
      <span class="ownerName">
<span>
Justin</span>
      <span>
Chase</span>
      </span>
    </div>

    <a href="/projects/5bfd9a57cc80e600214b475b" class="myBtn">More Info</a>
  </div>
  <div class="project flexbox">
    <div class="projectStatus" style="background-color: rgb(123, 43, 218);">
      <span class="icon"><i class="fas fa-redo"></i></span>
      <span>
In Progress</span>
    </div>
    <div class="caption">
      <span style="font-size: 1.125em; text-transform: uppercase; font-weight: 500; color: #676767;">
Voice Intake Portal</span>
    </div>
    <div class="ownerList">
      <span class="ownerTitle">Owners:</span>
      <span class="ownerName">
<span>
Justin Ob</span>
      </span>
    </div>

    <a href="/projects/5baea230d730f73ec0bce331" class="myBtn">More Info</a>
  </div>
  <div class="project flexbox">
    <div class="projectStatus" style="background-color: rgb(123, 43, 218);">
      <span class="icon"><i class="fas fa-redo"></i></span>
      <span>
In Progress</span>
    </div>
    <div class="caption">
      <span style="font-size: 1.125em; text-transform: uppercase; font-weight: 500; color: #676767;">
testing </span>
    </div>
    <div class="ownerList">
      <span class="ownerTitle">Owners:</span>
      <span class="ownerName">
<span>
Chase</span>
      </span>
    </div>

    <a href="/projects/5c0c4067e09b990021d86bc9" class="myBtn">More Info</a>
  </div>
</div>

script.js

$(document).ready(function(){
    $("#searchFilter").on("keyup", function () {
        var searchString = $(this).val().toString().toLowerCase();
        if (searchString.length > 0) {
          $("div.project").each(function () {
            $(this).hide();
          });
            $("div.project > div.caption").each(function () {
                    var search = $(this).children().text().toString().toLowerCase();
                    search = search.replace(/\s/g, '');
                    var exist = search.includes(searchString);
                    if (exist === true) {
                      $(this).parent().show();
                    }
            });
            $("div.project > div.ownerList").each(function () {
                    var search = $(this).children().text().toString().toLowerCase();
                    search = search.replace(/\s/g, '');
                    var exist = search.includes(searchString);
                    if (exist === true) {
                      $(this).parent().show();
                    }
            });
        } else {
          $("div.project").each(function () {
            $(this).show();
          });
        }
    });
  });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>