我的搜索框不起作用我想在 div 元素中搜索，但它对我没有帮助

Question

我想在 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>

这是我的搜索框

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

另外，我在显示更多选项中使用了一些 javascript，它应该不起作用，请帮助我！

<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>

Java 我使用的脚本在上面请帮助我我想在 DIV 元素中搜索并在相同的 position 上显示结果帮助我如何使它工作。

Answer 1

尝试这个

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());
    })
}