Функция поиска jQuery не показывает весь div

Question

Я пытаюсь создать функцию поиска, которая проходит через мои <div> все теги <p>. Мне удается сделать эту работу, но не до 100%. Проблема в том, что целое <div> не показано в конце. Показывается только элемент, соответствующий результату поиска. И видео всегда отображается независимо от того, есть ли совпадение или нет в теге <p>.

Итак, я хочу, чтобы все внутри <thumbnail> отображалось не только <p>, которое соответствует поиску. Как?

Мой код:

$('#searchField').keyup(function(){ 
 
    var valThis = $(this).val().toLowerCase(); 
 
    $('.video-list p').each(function(){ 
 
     var text = $(this).text().toLowerCase(); 
 
     (text.indexOf(valThis) == 0) ? $(this).show() : $(this).hide(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- form --> 
 

 
<form id="live-search" action="" class="styled" method="post"> 
 
    <div class="col-md-4"> 
 
    <input type="text" placeholder="Title" id="searchField"> 
 
    </div> 
 
</form> 
 

 
<!-- what i'm searching through (its repeating)--> 
 

 
<div class="row upload-video video-list"> 
 
    <div class="col-md-4"> 
 
    <div class="thumbnail"> 
 

 
     <div class="video-part"> 
 
     <iframe width="100%" height="100%" src="https://www.youtube.com/embed/-w8As0gln6o" frameborder="0" allowfullscreen></iframe> 
 
     </div> 
 
     <p class="">Tempor incididunt ut labore et dolore magna</p> 
 
     <p class="">Horse Name</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Вы можете сделать это

$('#searchField').keyup(function(){ 
    var valThis = $(this).val().toLowerCase(); 

    var p_ele = $(".video-list .thumbnail"); 
    p_ele.each(function(){ 
    var present = $(this).children("p").text().toLowerCase(); 
    if(present.indexOf(valThis) == -1){ 
    $(this).hide(); 
    }else{ 
    $(this).show(); 
    } 
    }); 
}); 

Демо: http://jsbin.com/rasuho/edit?js,output

Answer 2

Вот JS:

var filterFunc = function($parent, valThis){ 
    var $p = $parent.find("p"); 
    var found = $p.filter(function(el){   
    return $(this).text().toLowerCase().indexOf(valThis) > -1; 
    }); 

    //hides parent div if we have not found in any of 'p' 
    if(found && found.length == 0){ 
    $parent.hide(); 
    }else{ 
    $parent.show(); 
    } 
} 

$('#searchField').keyup(function(){ 
    var valThis = $(this).val().toLowerCase(); 
    $('.video-list').each(function(){ 
    filterFunc($(this), valThis); 
    }); 
}); 

Работа скрипку: http://jsfiddle.net/H6rQ6/16956/

Answer 3

То, что вы пытаетесь достичь только для отображения div.thumbnail пункта (ы), если условие поиска отображается в любом из div.thumbnail P. (, так как ваш данный HTML ограничен, я предположил, что повторный родительский обертка тег будет div.thumbnail)

Но вы называете show/hide function индивидуальны на каждые P тегов, что делает триггер функции независимо от того, это siblings результатов (например: Даже если поисковый термин появится в div.thumbnail p:nth-of-type[1], это все равно вызовет функцию hide(), поскольку она не найдена в div.thumbnail p:nth-of-type[2])

Итак, вы должны приложить show/hide function к текстовым результатам как для дочерних тегов в целом. Ниже

$('#searchField').keyup(function(){ 
    var valThis = $(this).val().toLowerCase(); 
    $('.thumbnail') 
    .hide()      // reset display val of .thumbnail 
    .filter(function(){   // get items with search-text only 
     var pTxt = $('p',this).text().toLowerCase(); 
     return (pTxt.indexOf(valThis) != -1) ? this : '' ;  
    }) 
    .show('fast');    // show items with search-text 
}); 

see demo

Answer 4

$(this).hide() скроет текущий элемент означает здесь p поэтому используйте $(this).parent().hide()

$('#searchField').keyup(function(){ 
    var valThis = $(this).val().toLowerCase(); 
    $('.video-list p').each(function() 
    { 
     var text = $(this).text().toLowerCase(); 
     (text.indexOf(valThis) == 0) ? $(this).parent().show() : $(this).parent().hide(); 
    }); 
});