Mi cuadro de búsqueda no funciona Quiero buscar dentro del elemento div pero no está [cerrado]

Quiero buscar entre estos elementos en el elemento DIV:

<span class="box1"> 
            <div class="container">
                <div class="row">
                    <div class="col">
                        <div class="imgBox">
                            <img src="images/gta5.jpeg" alt="">
                        </div>
                        <div class="content">
                            <h2 class="title">
                               Grand Theft Auto 5 Download | Free Download
                            </h2>
                        </div>
                    </div>
                    <div class="col">
                        <div class="imgBox">
                            <img src="images/nowayhome.jpeg" alt="News">
                        </div>
                        <div class="content">
                            <h2 class="title">
                                Spiderman No Way Home | Full Movie Download Hindi | 
                            </h2>
                        </div>
                    </div>
                    <div class="col">
                        <div class="imgBox">
                            <img src="images/gta4.jpeg" alt="News">
                        </div>
                        <div class="content">
                            <h2 class="title">
                                Grand Theft Auto 4 Download | Free Download
                            </h2>
                        </div>
                    </div>
                   
        
                    <div class="col">
                        <div class="imgBox">
                            <img src="images/shershaah.jpeg" alt="News">
                        </div>
                        <div class="content">
                            <h2 class="title">
                                Shershaah Full movie download HD
                            </h2>
                        </div>
                    </div>
                   
              
        
                    <div class="col">
                        <div class="imgBox">
                            <img src="images/sooryavanshi.jpeg" alt="News">
                        </div>
                        <div class="content">
                            <h2 class="title">
                                Sooryavanshi Full Movie Download HD
                            </h2>
                        </div>
                    </div>
                    <div class="col">
                        <div class="imgBox">
                            <img src="images/gta3.jpeg" alt="News">
                        </div>
                        <div class="content">
                            <h2 class="title">
                                Grand Theft Auto 3 Download | Free Download
                            </h2>
                        </div>
                    </div>

        
                    <div class="col">
                        <div class="imgBox">
                            <img src="1.jpg" alt="News">
                        </div>
                        <div class="content">
                            <h2 class="title">
                                Android 11: Here are the 8 best new features
                            </h2>
                        </div>
                    </div>
                    <div class="col">
                        <div class="imgBox">
                            <img src="2.jpg" alt="News">
                        </div>
                        <div class="content">
                            <h2 class="title">
                                PHP 8 Release on November 2020
                            </h2>
                        </div>
                    </div>

                    <div class="col">
                        <div class="imgBox">
                            <img src="1.jpg" alt="News">
                        </div>
                        <div class="content">
                            <h2 class="title">
                                Android 11: Here are the 8 best new features
                            </h2>
                        </div>
                    </div>
                    <div class="col">
                        <div class="imgBox">
                            <img src="2.jpg" alt="News">
                        </div>
                        <div class="content">
                            <h2 class="title">
                                PHP 8 Release on November 2020
                            </h2>
                        </div>
                    </div>

        
                    <div class="col">
                        <div class="imgBox">
                            <img src="1.jpg" alt="News">
                        </div>
                        <div class="content">
                            <h2 class="title">
                                Android 11: Here are the 8 best new features
                            </h2>
                        </div>
                    </div>
                    <div class="col">
                        <div class="imgBox">
                            <img src="2.jpg" alt="News">
                        </div>
                        <div class="content">
                            <h2 class="title">
                                PHP 8 Release on November 2020
                            </h2>
                        </div>
                    </div>

Y este es mi cuadro de búsqueda

<div class="search">
            <h3>Search</h3>
            <input type="text" id="searchbar" placeholder="Search.." onkeyup="search_animal()">
            <button type="button"> Search </button>
        </div>

También he usado algo de JavaScript para mostrar más opciones que no deberían afectar:

<script>
                $(".col").slice(0, 4).show()
                $(".btn").on("click", function(){

                    $(".col:hidden").slice(0, 4).slideDown()
                    if ($(".col:hidden").length == 0) {
                        $(".btn").fadeOut('slow')

                    }
                })
            </script>

El JavaScript que utilicé está arriba. Quiero buscar dentro del elemento DIV y mostrar resultados en la misma posición. ¿Cómo puedo hacer que esto funcione?

Answer

prueba esto

function search_animal()
{
    var results = [];
    var SearchInputValue = $("#searchbar").val();
    var elements = $(".title");
    elements.each(function(i){
       if($(elements[i]).html().indexOf(SearchInputValue) >= 0)
          results.push($(elements[i]).html());
    })
}