Динамически поиск Список дивы

Question

у меня есть список дивы в следующей структуре -

Html

<div class="firstDiv"> 
    <input type="text" id="searcher" placeholder="Search names (start typing)"> 
    <div class="secondDiv"> 
     <div class="entryDiv"> 
     <input id="colin"> 
     </div> 
     <div class="entryDiv"> 
     <input id="chris"> 
     </div> 
     <div class="entryDiv"> 
     <input id="zander"> 
     </div> 
    </div> 
</div> 

JS

$(document).ready(function() { 

$("#searcher").on("keyup click input", function() { 
if (this.value.length > 0) { 
    $(".secondDiv entryDiv").hide().filter(function() { 
    return $(this).text().toLowerCase().indexOf($("#searcher").val().toLowerCase()) != -1; 
    }).show(); 
} 
else { 
    $(".secondDiv entryDiv").hide(); 
} 
}); 

}); 

То, что я пытался сделать это используйте поле поиска - searcher, используя jquery, чтобы при нажатии клавиши entryDiv s динамически отображались или скрыты на основе значений входов в зависимости от того, что набирается. Поэтому, если пользователь вводит букву «c», два div, содержащие «colin» и «chris», будут оставлены, однако «zander» будет удален. Если поле поиска было пустым, список по умолчанию возвращается к исходному виду.

Так же, как в примере, показанном here.

Answer 1

Во-первых, ваш вопрос указывает

Таким образом, если пользователь вводит букву «с «два divs, содержащие« colin »и« chris », останутся присутствующими, однако« zander "Не будет удален

Ни один из ваших входов содержат ничего, они имеют идентификаторы. Возможно, что вы хотели есть, например

<input value="colin"> 

который сделает поля содержат, что текст.

Далее, ваши селекторы отсутствуют период:

$(".secondDiv entryDiv").... 

должен быть

$(".secondDiv .entryDiv").... 

Наконец, здесь рабочий образец

$("#searcher").on("keyup click input", function() { 
 
    var val = $(this).val(); 
 
    if (val.length) { 
 
     $(".secondDiv .entryDiv").hide().filter(function() { 
 
      return $('input',this).val().toLowerCase().indexOf(val.toLowerCase()) != -1; 
 
     }).show(); 
 
    } 
 
    else { 
 
     $(".secondDiv .entryDiv").show(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="firstDiv"> 
 
    <input type="text" id="searcher" placeholder="Search names (start typing)"> 
 
    <div class="secondDiv"> 
 
     <div class="entryDiv"> 
 
     <input value="colin"> 
 
     </div> 
 
     <div class="entryDiv"> 
 
     <input value="chris"> 
 
     </div> 
 
     <div class="entryDiv"> 
 
     <input value="zander"> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

http://jsfiddle.net/mc5q4efz/2/

Упрощенная:

$("#searcher").on("keyup", function (e) { 
    var input = $(this).val(); 
    if (input.length > 0){ 
     $('div.entryDiv > input').hide(); 
     $("input[id*="+input+"]").show(); 
    }else{ 
     $('div.entryDiv > input').show(); 
    } 
});