Gustavo Henrique Gustavo Henrique - 3 months ago 7x
HTML Question

Search for Text inside div

The problem is: I have one div that wraps all my users list. I want to make a search box, but i don't want to use Ajax, so i started trying JQuery, for search the text inside the div and hide the another results. I've tried but i'm stucked on this:

//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')
// }
if($(div).html().indexOf($(div).val()) > -1){
console.log($(div).html() + ' found: ' + i);
} else {
console.log("Not Found")



Someone know how i can do this?

In my HTML i have this:

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

Inside "chat-users" i have a list with all users, loaded with php

Here is more HTMl to show the structure:


After Question Edit

Here is an updated JSFiddle based on the JSFiddle you included showing how to implement the search with your particular use-case:


Original Answer:

You're missing some pertinent information in your question, such as "what does the HTML look like that comes from user-chat-list.php?" And because of that it makes it hard to understand exactly how your code applies.

Nevertheless, here is a simple example upon what you have provided that you can modify that does what you are looking for. You can run the following code snippet to see a working example:

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

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

  $userDivs.each(function(i, div) {
    var $div = $(div);
    $div.toggle($div.text().toLowerCase().indexOf(scope.value.toLowerCase()) > -1);
<script src=""></script>
<input id="search-weeazer">

<div class="chat-users">