javascript - 如何在使用 jQuery 进行实时搜索时隐藏 div

Question

我正在尝试在 jQuery 中创建一个函数，在输入时，它 livesearch div 具有相同的 h5 元素(我知道它可能是 class 或 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。不过我认为我错过了一些东西或者我做错了。我对 jQuery 不太有经验。

这是搜索框:

<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();
            }

        });
    });
});

• 额外:第一件事是我发现的一个片段，因为我认为用户倾向于使用小写字母进行搜索；并且它允许不区分大小写进行搜索。
• 更改了搜索输入的 ID (#inputBusqueda)。
• 重做了所有“包含”部分。在您的代码中，您使用了 $.contains() 但就像 @Stu Cartwright 所说，它用于比较元素关系等。
• 我的方法很简单:对于每个“列”，我们检查 h5 子元素 :contain 是否包含 filter 值，如果是这样，我们就显示它，否则我们就隐藏它。

检查JSFiddle demo 。另外，如果您希望搜索区分大小写，只需删除第一部分即可。