Как скрыть дивы, когда livesearching с JQuery

Question

Я пытаюсь сделать функцию в JQuery, что при вводе, то его livesearch дивы с тем же h5 элемент (я знаю, что это может быть класса или id, но я делаю это так, потому что причины). И когда поисковый ящик снова пуст, все должно вернуться к норме.

Я использую панели Bootstrap для достижения этой цели.

Мой код jQuery - это. Я получил его от другого ответа здесь, но модифицирован немного для меня необходимо:

//Se supone que busca. Lo plagié vilmente. 
$("#busqueda").keyup(function(){ 

// Retrieve the input field text and reset the count to zero 
var filter = $(this).val(); 

// Loop through the comment list 
$(".nombre").each(function(){ 

    // If the list item does not contain the text phrase fade it out 
    if ($(this).attr("h5").contains(new RegExp(filter, "i")) < 0) { 
     $(this).fadeOut(); 

     alert(filter); 

    // Show the list item if the phrase matches and increase the count by 1 
    } else { 
     $(this).show(); 
    } 
}); 
}); 

Мой HTML-код:

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-4 col-md-4 p1" data-clickstate="0"> 
      <div class="panel panel-default" id="panel_1"> 
       <div class="panel-body" style="display: inline" id="cat_1"> 

        <div class="icono"> 
         <img src="media/iconos/motores_busqueda.png" alt=""> 
        </div> 
        <div class="nombre-y-des"> 
         <div> 
          <h5 class="nombre">Motores de búsqueda</h5> 
         </div> 
         <div class="des"> 
          <p>Servicios de búqueda de páginas web.</p> 
         </div> 
        </div> 

       </div> 
      </div> 
     </div> 

     <div class="col-sm-4 col-md-4"> 
      <div class="panel panel-default" id="panel_2"> 
       <div class="panel-body" id="cat_2" style="display: inline"> 
        <div class="icono"> 
         <img src="media/iconos/navegadores.png" alt=""> 
        </div> 
        <div class="nombre-y-des"> 
         <div> 
          <h5 class="nombre">Navegadores</h5> 
         </div> 
         <div class="des"> 
          <p>Programa que permite navegar por internet, renderizado páginas HTML en contenido visual y 
           comprensible. 
          </p> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

     <div class="col-sm-4 col-md-4"> 
      <div class="panel panel-default" id="panel_3"> 
       <div class="panel-body" id="cat_3" style="display: inline"> 
        <div class="icono"> 
         <img src="media/iconos/servidores_correo.png" alt=""> 
        </div> 
        <div class="nombre-y-des"> 
         <div> 
          <h5 class="nombre">Servidores de correo</h5> 
         </div> 
         <div class="des"> 
          <p>Servicio que permite enviar y recibir mensajes mediante sistemas de comunicación eletrónicos 
           en línea.</p> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

код JQuery должен смотреть на h5 атрибут, чтобы сравнить его с что набирается, и, следовательно, скрывать все остальные div. Tho Я думаю, что я что-то упустил, или я все делаю неправильно. Я не так разбираюсь в jQuery.

Это SearchBox:

<div id="contenido"> 
    <div class="container"> 
     <div class="row" id="busqueda"> 
      <div class="col-md-12 text-center "> 
       <div id="custom-search-input"> 
        <div class="input-group col-md-12"> 
         <input type="text" class="form-control input-lg" placeholder="Actividad a realizar, categorías, etc. (no olvides escribir los acentos correctamente ;~)" 
          id="inputBusqueda" /> 
         <span class="input-group-btn"> 
          <button class="btn btn-info btn-lg" type="button"> 
           <i class="glyphicon glyphicon-search"></i> 
          </button> 
          </span> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

// Case insensitive :contains | https://css-tricks.com/snippets/jquery/make-jquery-contains-case-insensitive/ 
 
$.expr[":"].contains = $.expr.createPseudo(function(arg) { 
 
    return function(elem) { 
 
     return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; 
 
    }; 
 
}); 
 

 
$(document).ready(function() { 
 
    //Se supone que busca. Lo plagié vilmente. 
 
    $("#inputBusqueda").keyup(function() { 
 
     // Retrieve the input field text and reset the count to zero 
 
     var filter = $(this).val(); 
 

 
     // Loop through the comment list 
 
     $(".col-sm-4.col-md-4").each(function() { 
 

 
      if ($(this).find('h5').is(':contains("' + filter + '")')) { 
 
       $(this).show(); 
 
      } else { 
 
       $(this).hide(); 
 
      } 
 

 
     }); 
 
    }); 
 
});

• Дополнительно: первое, что это фрагмент я нашел, потому что я думаю, что пользователи, как правило, искать в нижнем регистре; и это позволяет искать в нечувствительном случае.
• Изменен идентификатор поискового ввода (#inputBusqueda).
• Redid все "содержит" часть. В вашем коде вы использовали $.contains(), но, как и @Stu Cartwright, он используется для сравнения отношений элементов и т. Д.
• То, как я это делал, просто: для каждого «столбца» мы проверяем, есть ли h5 ребенок с значением filter, если мы его показываем, иначе мы его спрячем.

Проверить JSFiddle demo. Также, если вы хотите, чтобы поиск был чувствительным к регистру, просто избавитесь от первой части.

Answer 2

атр («h5») не будет работать, и вам не нужно, потому что вы уже выбрали Н5 элементы с «Nombre класса ».

contains() может не делать то, что вы думаете. это для проверки отношений родитель/потомок в DOM (вы можете путая его с :contains)

Чтобы получить текст элементов Номбр использовать только

$(this).text() 

или

$(this).html() 

Затем запустите ваше регулярное выражение.