Поиск текста внутри div

Question

Проблема в следующем: у меня есть один div, который обертывает список всех моих пользователей. Я хочу создать окно поиска, но я не хочу использовать Ajax, поэтому я начал пытаться использовать JQuery для поиска текста внутри div и скрыть другие результаты. Я пробовал, но я застрял на этом:

//Search Box 
$(document).on('input', "#search-weeazer", function(e){ 
    console.log('input ativado') 
    if($(this).val().length >= 4){ 
     // if($('#colmeia-chat').html().indexOf($(this).val()) > -1){ 
     //  console.log('Found') 
     // } else { 
     //  console.log('Not Found') 
     // } 
     $('div.chat-users>div').each(function(i,div){ 
      if($(div).html().indexOf($(div).val()) > -1){ 
       console.log($(div).html() + ' found: ' + i); 
      } else { 
       console.log("Not Found") 
      } 

     }); 
    } 


}); 

Кто-то знает, как я могу это сделать? Спасибо!

В моем HTML я есть это:

<div class="chat-users" style="height: 400px;"> 
      <?php include_once('user-chat-list.php'); ?> 
     </div> 

Внутри «чат-пользователей» У меня есть список всех пользователей, загруженную с PHP

Вот еще Html, чтобы показать структуру: https://jsfiddle.net/jdqbnz2w/

Answer 1

После Вопрос Edit

Вот обновленный JSFiddl е на основе JSFiddle вы включили показ, как осуществлять поиск с конкретной потребительной случае:

JSFiddle

---

Оригинал Ответ:

Вы пропустили некоторую соответствующую информацию в вашем вопрос, такой как «», как выглядит HTML-код, который исходит от user-chat-list.php? » И из-за этого трудно понять, как именно применяется ваш код.

Тем не менее, вот простой пример того, что вы предоставили, что можете изменить, делает то, что вы ищете. Вы можете запустить следующий фрагмент кода, чтобы увидеть рабочий пример:

var $searchBox = $('#search-weeazer'); 
 
var $userDivs = $('.chat-users div'); 
 

 
$searchBox.on('input', function() { 
 
    var scope = this; 
 
    if (!scope.value || scope.value == '') { 
 
    $userDivs.show(); 
 
    return; 
 
    } 
 

 
    $userDivs.each(function(i, div) { 
 
    var $div = $(div); 
 
    $div.toggle($div.text().toLowerCase().indexOf(scope.value.toLowerCase()) > -1); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Search: 
 
<input id="search-weeazer"> 
 

 
<p>Users:</p> 
 
<div class="chat-users"> 
 
    <div>Tony</div> 
 
    <div>Amber</div> 
 
    <div>Ronald</div> 
 
</div>