Question

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

我想从上面的div列表中搜索div标签中的内容，我目前只给了一个div。我想搜索文本，匹配的文本div将显示在所有div的顶部。我想要一个像jquery datatable搜索结果的搜索结果。提前致谢

Answer 1

这是工作代码：用“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(); 
        }); 
 });

搜索div标签中的任何内容，并在所有div的顶部显示搜索到的div

1 个答案: