JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row collapse">
    <div class="small-9 columns">
        <input type="text" placeholder="Search Song Titles" id="searchBox" />
    </div>
    <div class="small-3 columns">
        <button id="hide" type="submit" class="postfix">Search</button>
    </div>
</div>
<div class="sresult" data-which="video_search" data-videotitle="apple">Apple</div>
<div class="sresult" data-which="video_search" data-videotitle="abc">ABC</div>
<div class="sresult" data-which="video_search" data-videotitle="ball">BALL</div>
<div class="sresult" data-which="video_search" data-videotitle="cat">CAT</div>
<div class="sresult" data-which="video_search" data-videotitle="car">CAR</div>

JavaScript

$("button").click(function () {
     var searchBox = $("#searchBox").val();
     $('[data-which="video_search"]').hide();
     $('[data-which="video_search"]').filter(function () {
         if ($(this).attr('data-videotitle').toLowerCase().indexOf(searchBox.toLowerCase()) == 0) 
             return true
     }).show();

 });