时间戳

首页 > 解决方案 > Search any content from div tag and show the searched div at top of all divs

jquery - Search any content from div tag and show the searched div at top of all divs

问题描述

    <div class="search-container">
        <input type="text" class="input-medium search-query" placeholder="Search">
        <button type="button" class="btn">Search</button>
    </div>
<div class="panel panel-default">
    <div class="panel-body">
        <div class="col-sm-6 col-md-2">
            <img src="~/ProfileImg/30052018051539_crop.jpg" alt="" class="img-circle img-responsive">
        </div>
        <div class="col-sm-6 col-md-8">
            <p><strong><a onmouseover="" style="cursor: pointer;" ></a></strong></p><p class="custom_j"><strong><a>Dr. Amruta Kadam</a></strong></p><p></p>
            <p>MD (HOMEOPATHY)</p>
            <p>Dermatologist</p>
            <div class="info">
                Chaitanya clinic, Shankar complex
            </div>
            <div class="row" style="margin-top: 5px;">

                <div class="col-md-3">
                    <dt>
                        <div class="Strong">Distance</div>
                    </dt>
                    <div class="desc"><span>10km</span></div>
                </div>
                <div class="col-md-3">
                    <dt>
                        <div class="Strong">Reviews</div>
                    </dt>
                    <div class="desc"><span>0</span></div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                </div>
                <div class="col-md-6">

                    <div class="row ">
                        <h5>Insurance<span style="color: rgb(0, 186, 242);"> Partners</span></h5>
                        <div class="popup-gallery">
                            <a href="#" title="Photo 1">
                                <img src="/Loginassets/images/lic.png" alt="">
                            </a>
                            <a href="#" title="Photo 1">
                                <img src="/Loginassets/images/india.png" alt="">
                            </a>
                            <a href="#" title="Photo 1">
                                <img src="/Loginassets/images/more.png" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I wants to search a content from a div tag from a list of div as above, I currently given only one div. I wants to search a text and the matching text div will display at top of all divs. I wants a search result like jquery datatable search result. Thanks in advance

标签： jqueryhtml

解决方案

这是工作代码：使用“HOMEOPATHY”或“1111”等搜索，它将隐藏另一行

https://codepen.io/creativedev/pen/WyQzwZ

你传递了错误的类名。我采用了新的班级名称并且它正在工作。

$('.btn').on('click', function(e){ 
    var query = $.trim($(this).prevAll('.search-query').val()).toLowerCase(); console.log(query)
    $('div.test').each(function(){ 
        var $this = $(this); if($this.text().toLowerCase().indexOf(query) === -1) 
            $this.closest('div.test').fadeOut(); 
        }); 
 });

推荐阅读