Question

Я создаю функцию фильтрации. С помощью этой функции мы хотим отфильтровать карточки приложений, но я не могу правильно отобразить элемент. Функция не показывает часть отфильтрованной карты, кнопку, изображение или текст. Я знаю, что, поместив "#myDIV *" в функцию .filter, он будет искать все элементы, даже зная это, я не нашел правильного способа сделать это. Кто-нибудь может мне помочь?

Я пробовал с кодом ниже:

        $(document).ready(function () {
            $("#myInput").on("keyup", function () {
                var value = $(this).val().toLowerCase();    
                $("#myDIV *").filter(function () {
                    if ($(this).text().toLowerCase() != "abrir") {
                        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                    }
                });
            });
        });

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon.png">
    <title>SGR - Desktop</title>
    <!-- Custom CSS -->
    <!-- Custom CSS -->
    <link href="/assets/css/font-awesome.css" rel="stylesheet" />
    <link href="/assets/libs/toastr/build/toastr.min.css" rel="stylesheet">
    <link href="/assets/libs/select2/dist/css/select2.min.css" rel="stylesheet">
    <link href="/dist/css/style.min.css" rel="stylesheet">
    <link href="/dist/css/core.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <!-- ============================================================== -->
    <!-- Preloader - style you can find in spinners.css -->
    <!-- ============================================================== -->
    <div class="preloader">
        <div class="lds-ripple">
            <div class="lds-pos"></div>
            <div class="lds-pos"></div>
        </div>
    </div>
    <div id="main-wrapper">
        <div class="page-wrapper">
            <div class="page-breadcrumb">
                <div class="row">
                    <div class="col-12 d-flex no-block align-items-center">
                        


    <div class="header-title">
        <h1>
            Home
                    <small>
                        <i class="fa fa-angle-right"></i>
                        Desktop
                    </small>
        </h1>
    </div>

                    </div>
                </div>
            </div>
            <div class="container-fluid">
                

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
<input class="form-control col-md-3 col-sm-4 col-xs-6" id="myInput" type="text" placeholder="Search..">
<br />
<br />
<div class="container">
    <div  id="myDIV"  class="row">

                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="emulador project64">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">emulador project64</h5>
                                <p class="card-text">project64.exe</p>
                                <a href="project64.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="overwatch">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">overwatch</h5>
                                <p class="card-text">overwatch.exe</p>
                                <a href="overwatch.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="YouTube">
                            <img class="card-img-top" src="../../assets/images/YouTube.png">
                            <div class="card-body">
                                <h5 class="card-title">YouTube</h5>
                                <p class="card-text">Google Inc.</p>
                                <a href="https://www.youtube.com/" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Canal de Denuncias">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Canal de Denuncias</h5>
                                <p class="card-text">https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx</p>
                                <a href="https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Cipher">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Cipher</h5>
                                <p class="card-text">www.cipher.cl</p>
                                <a href="www.cipher.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Terraria">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Terraria</h5>
                                <p class="card-text">shared/terraria.exe</p>
                                <a href="shared/terraria.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Revista And&#233;n">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Revista And&#233;n</h5>
                                <p class="card-text">http://nt25_intranet/archivos/revistas/2017-03/revista.pdf</p>
                                <a href="http://nt25_intranet/archivos/revistas/2017-03/revista.pdf" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Smov2">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Smov2</h5>
                                <p class="card-text">\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe</p>
                                <a href="\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Concursos internos">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Concursos internos</h5>
                                <p class="card-text">https://metro.openagora.cl/</p>
                                <a href="https://metro.openagora.cl/" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="The Clinic">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">The Clinic</h5>
                                <p class="card-text">www.theclinic.cl</p>
                                <a href="www.theclinic.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Hotmail">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Hotmail</h5>
                                <p class="card-text">http://www.hotmail.com</p>
                                <a href="http://www.hotmail.com" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Gmail">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Gmail</h5>
                                <p class="card-text">http://www.gmail.com</p>
                                <a href="http://www.gmail.com" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="CNN">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">CNN</h5>
                                <p class="card-text">www.cnn.org</p>
                                <a href="www.cnn.org" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Metro Familia">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Metro Familia</h5>
                                <p class="card-text">http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia</p>
                                <a href="http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="League of Legends">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">League of Legends</h5>
                                <p class="card-text">lollauncher.exe</p>
                                <a href="lollauncher.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Minecraft Java Edition">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Minecraft Java Edition</h5>
                                <p class="card-text">minecraft.exe</p>
                                <a href="minecraft.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Webmail Metro">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Webmail Metro</h5>
                                <p class="card-text">https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&amp;url=https%3a%2f%2fmail.metro.cl%2fowa%2f</p>
                                <a href="https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&amp;url=https%3a%2f%2fmail.metro.cl%2fowa%2f" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Autoconsulta ESS">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Autoconsulta ESS</h5>
                                <p class="card-text">http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0</p>
                                <a href="http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="And&#233;n Social">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">And&#233;n Social</h5>
                                <p class="card-text">http://andensocial.metro.cl</p>
                                <a href="http://andensocial.metro.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Sitio Conductores">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Sitio Conductores</h5>
                                <p class="card-text">http://operaciones.metrosantiago.cl/</p>
                                <a href="http://operaciones.metrosantiago.cl/" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


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



            </div>
            <footer class="footer text-center">
<div class="modal" id="loginModal"><div class="modal-dialog modal-lg"><div class="modal-content">                    <div id="login"></div>
</div></div></div>                
            </footer>
        </div>
    </div>
    <script src="/assets/libs/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="/assets/libs/popper.js/dist/umd/popper.min.js"></script>
    <script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
    <script src="/assets/extra-libs/sparkline/sparkline.js"></script>
    <!--Wave Effects -->
    <script src="/dist/js/waves.js"></script>
    <!--Menu sidebar -->
    <script src="/dist/js/sidebarmenu.js"></script>
    <!--Custom JavaScript -->
    <script src="/dist/js/custom.min.js"></script>
    <script src="/dist/js/core.js"></script>
    <script src="/assets/libs/toastr/build/toastr.min.js"></script>
    <script src="/assets/libs/select2/dist/js/select2.full.min.js"></script>
    <script src="/assets/libs/select2/dist/js/select2.min.js"></script>
    <script src="/assets/libs/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="/assets/libs/bootbox/bootbox.js"></script>

    <!--This page JavaScript -->
    <!-- <script src="~/dist/js/pages/dashboards/dashboard1.js"></script> -->
    <!-- Charts js Files -->

    <!--Success Modal Templates-->
<div class="modal fade modal-message modal-success" id="modal-success"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">        <i class="far fa-check-circle"></i>
</div><div class="modal-title">        Correcto
</div><div class="modal-body">        La solicitud se efectuó con éxito
</div><div class="modal-footer"><button class="btn btn-success " data-dismiss="modal" type="button">Aceptar</button></div></div></div></div>
<!--End Success Modal Templates-->
<!--Info Modal Templates-->
<div class="modal fade modal-message modal-info" id="modal-info"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">        <i class="fa fa-envelope"></i>
</div><div class="modal-title">        Información
</div><div class="modal-body">        Se le notifica información importante
</div><div class="modal-footer"><button class="btn btn-info " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Info Modal Templates-->
<!--Danger Modal Templates-->
<div class="modal fade modal-message modal-danger" id="modal-danger"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">        <i class="glyphicon glyphicon-fire"></i>
</div><div class="modal-title">        Error
</div><div class="modal-body">        Se ha producido un error
</div><div class="modal-footer"><button class="btn btn-danger " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Danger Modal Templates-->
<!--Warning Modal Templates-->
<div class="modal fade modal-message modal-warning" id="modal-warning"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">        <i class="fa fa-warning"></i>
</div><div class="modal-title">        Alerta
</div><div class="modal-body">        Algo ha salido mal
</div><div class="modal-footer"><button class="btn btn-warning " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Warning Modal Templates-->
<!--Confirm Modal Templates-->
<div id="core_modalconfirmdialog" style="display:none;">
    <div class="row">
        <div class="col-md-12">
            <div class="modal-header">
                <i class="fa fa-warning"></i>
            </div>
            <div class="modal-body">
                Mensaje
            </div>
            <div class="modal-body">
                Mensaje que iría en el centro
            </div>
        </div>
    </div>
</div>
<!--Confirm Modal Templates-->


</body>

</html>

Carl Edwards · Answer 1 · 08 ноября 2019

Вы можете сначала спрятать все карточки при наборе текста и показывать только те карты, которые основаны на поисковом запросе. Чтобы немного упростить ваш фильтр, вы можете использовать , включая .

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();

    $("div[class^=col]")
      .hide()
      .filter(function() {
        var cardTitle = $(this).find('.card-title').text().toLowerCase();

        return cardTitle.includes(value);
      })
      .show();
  });
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- Favicon icon -->
  <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon.png">
  <title>SGR - Desktop</title>
  <!-- Custom CSS -->
  <!-- Custom CSS -->
  <link href="/assets/css/font-awesome.css" rel="stylesheet" />
  <link href="/assets/libs/toastr/build/toastr.min.css" rel="stylesheet">
  <link href="/assets/libs/select2/dist/css/select2.min.css" rel="stylesheet">
  <link href="/dist/css/style.min.css" rel="stylesheet">
  <link href="/dist/css/core.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
  <!-- ============================================================== -->
  <!-- Preloader - style you can find in spinners.css -->
  <!-- ============================================================== -->
  <div class="preloader">
    <div class="lds-ripple">
      <div class="lds-pos"></div>
      <div class="lds-pos"></div>
    </div>
  </div>
  <div id="main-wrapper">
    <div class="page-wrapper">
      <div class="page-breadcrumb">
        <div class="row">
          <div class="col-12 d-flex no-block align-items-center">



            <div class="header-title">
              <h1>
                Home
                <small>
                        <i class="fa fa-angle-right"></i>
                        Desktop
                    </small>
              </h1>
            </div>

          </div>
        </div>
      </div>
      <div class="container-fluid">


        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <style>

        </style>
        <input class="form-control col-md-3 col-sm-4 col-xs-6" id="myInput" type="text" placeholder="Search..">
        <br />
        <br />
        <div class="container">
          <div id="myDIV" class="row">

            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="emulador project64">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">emulador project64</h5>
                  <p class="card-text">project64.exe</p>
                  <a href="project64.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="overwatch">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">overwatch</h5>
                  <p class="card-text">overwatch.exe</p>
                  <a href="overwatch.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="YouTube">
                <img class="card-img-top" src="../../assets/images/YouTube.png">
                <div class="card-body">
                  <h5 class="card-title">YouTube</h5>
                  <p class="card-text">Google Inc.</p>
                  <a href="https://www.youtube.com/" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Canal de Denuncias">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Canal de Denuncias</h5>
                  <p class="card-text">https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx</p>
                  <a href="https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Cipher">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Cipher</h5>
                  <p class="card-text">www.cipher.cl</p>
                  <a href="www.cipher.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Terraria">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Terraria</h5>
                  <p class="card-text">shared/terraria.exe</p>
                  <a href="shared/terraria.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Revista And&#233;n">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Revista And&#233;n</h5>
                  <p class="card-text">http://nt25_intranet/archivos/revistas/2017-03/revista.pdf</p>
                  <a href="http://nt25_intranet/archivos/revistas/2017-03/revista.pdf" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Smov2">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Smov2</h5>
                  <p class="card-text">\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe</p>
                  <a href="\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Concursos internos">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Concursos internos</h5>
                  <p class="card-text">https://metro.openagora.cl/</p>
                  <a href="https://metro.openagora.cl/" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="The Clinic">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">The Clinic</h5>
                  <p class="card-text">www.theclinic.cl</p>
                  <a href="www.theclinic.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Hotmail">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Hotmail</h5>
                  <p class="card-text">http://www.hotmail.com</p>
                  <a href="http://www.hotmail.com" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Gmail">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Gmail</h5>
                  <p class="card-text">http://www.gmail.com</p>
                  <a href="http://www.gmail.com" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="CNN">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">CNN</h5>
                  <p class="card-text">www.cnn.org</p>
                  <a href="www.cnn.org" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Metro Familia">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Metro Familia</h5>
                  <p class="card-text">http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia</p>
                  <a href="http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="League of Legends">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">League of Legends</h5>
                  <p class="card-text">lollauncher.exe</p>
                  <a href="lollauncher.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Minecraft Java Edition">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Minecraft Java Edition</h5>
                  <p class="card-text">minecraft.exe</p>
                  <a href="minecraft.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Webmail Metro">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Webmail Metro</h5>
                  <p class="card-text">https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&amp;url=https%3a%2f%2fmail.metro.cl%2fowa%2f</p>
                  <a href="https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&amp;url=https%3a%2f%2fmail.metro.cl%2fowa%2f" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Autoconsulta ESS">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Autoconsulta ESS</h5>
                  <p class="card-text">http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0</p>
                  <a href="http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="And&#233;n Social">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">And&#233;n Social</h5>
                  <p class="card-text">http://andensocial.metro.cl</p>
                  <a href="http://andensocial.metro.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Sitio Conductores">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Sitio Conductores</h5>
                  <p class="card-text">http://operaciones.metrosantiago.cl/</p>
                  <a href="http://operaciones.metrosantiago.cl/" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


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



      </div>
      <footer class="footer text-center">
        <div class="modal" id="loginModal">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div id="login"></div>
            </div>
          </div>
        </div>
      </footer>
    </div>
  </div>
  <script src="/assets/libs/jquery/dist/jquery.min.js"></script>
  <!-- Bootstrap tether Core JavaScript -->
  <script src="/assets/libs/popper.js/dist/umd/popper.min.js"></script>
  <script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
  <script src="/assets/extra-libs/sparkline/sparkline.js"></script>
  <!--Wave Effects -->
  <script src="/dist/js/waves.js"></script>
  <!--Menu sidebar -->
  <script src="/dist/js/sidebarmenu.js"></script>
  <!--Custom JavaScript -->
  <script src="/dist/js/custom.min.js"></script>
  <script src="/dist/js/core.js"></script>
  <script src="/assets/libs/toastr/build/toastr.min.js"></script>
  <script src="/assets/libs/select2/dist/js/select2.full.min.js"></script>
  <script src="/assets/libs/select2/dist/js/select2.min.js"></script>
  <script src="/assets/libs/jquery-validation/dist/jquery.validate.min.js"></script>
  <script src="/assets/libs/bootbox/bootbox.js"></script>

  <!--This page JavaScript -->
  <!-- <script src="~/dist/js/pages/dashboards/dashboard1.js"></script> -->
  <!-- Charts js Files -->

  <!--Success Modal Templates-->
  <div class="modal fade modal-message modal-success" id="modal-success">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header"> <i class="far fa-check-circle"></i>
        </div>
        <div class="modal-title"> Correcto
        </div>
        <div class="modal-body"> La solicitud se efectuó con éxito
        </div>
        <div class="modal-footer"><button class="btn btn-success " data-dismiss="modal" type="button">Aceptar</button></div>
      </div>
    </div>
  </div>
  <!--End Success Modal Templates-->
  <!--Info Modal Templates-->
  <div class="modal fade modal-message modal-info" id="modal-info">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header"> <i class="fa fa-envelope"></i>
        </div>
        <div class="modal-title"> Información
        </div>
        <div class="modal-body"> Se le notifica información importante
        </div>
        <div class="modal-footer"><button class="btn btn-info " data-dismiss="modal" type="button">Ok</button></div>
      </div>
    </div>
  </div>
  <!--End Info Modal Templates-->
  <!--Danger Modal Templates-->
  <div class="modal fade modal-message modal-danger" id="modal-danger">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header"> <i class="glyphicon glyphicon-fire"></i>
        </div>
        <div class="modal-title"> Error
        </div>
        <div class="modal-body"> Se ha producido un error
        </div>
        <div class="modal-footer"><button class="btn btn-danger " data-dismiss="modal" type="button">Ok</button></div>
      </div>
    </div>
  </div>
  <!--End Danger Modal Templates-->
  <!--Warning Modal Templates-->
  <div class="modal fade modal-message modal-warning" id="modal-warning">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header"> <i class="fa fa-warning"></i>
        </div>
        <div class="modal-title"> Alerta
        </div>
        <div class="modal-body"> Algo ha salido mal
        </div>
        <div class="modal-footer"><button class="btn btn-warning " data-dismiss="modal" type="button">Ok</button></div>
      </div>
    </div>
  </div>
  <!--End Warning Modal Templates-->
  <!--Confirm Modal Templates-->
  <div id="core_modalconfirmdialog" style="display:none;">
    <div class="row">
      <div class="col-md-12">
        <div class="modal-header">
          <i class="fa fa-warning"></i>
        </div>
        <div class="modal-body">
          Mensaje
        </div>
        <div class="modal-body">
          Mensaje que iría en el centro
        </div>
      </div>
    </div>
  </div>
  <!--Confirm Modal Templates-->


</body>

</html>

Jorge Esteban De Mesa Alvarez · Answer 2 · 08 ноября 2019

Я нашел способ решить проблему и предотвратить неправильное отображение карточек:

            $(document).ready(function () {
                $("#myInput").on("keyup", function () {
                    var value = $(this).val().toLowerCase();
                    $(".card").filter(function () {
                        $(this.parentNode).toggle($(this).find('.card-title').text().toLowerCase().indexOf(value) > -1)
                    });
                });
            });

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

  .card {
        min-height: 250px;
    }

<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon.png">
    <title>SGR - Desktop</title>
    <!-- Custom CSS -->
    <!-- Custom CSS -->
    <link href="/assets/css/font-awesome.css" rel="stylesheet" />
    <link href="/assets/libs/toastr/build/toastr.min.css" rel="stylesheet">
    <link href="/assets/libs/select2/dist/css/select2.min.css" rel="stylesheet">
    <link href="/dist/css/style.min.css" rel="stylesheet">
    <link href="/dist/css/core.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <!-- ============================================================== -->
    <!-- Preloader - style you can find in spinners.css -->
    <!-- ============================================================== -->
    <div class="preloader">
        <div class="lds-ripple">
            <div class="lds-pos"></div>
            <div class="lds-pos"></div>
        </div>
    </div>
    <div id="main-wrapper">
        <div class="page-wrapper">
            <div class="page-breadcrumb">
                <div class="row">
                    <div class="col-12 d-flex no-block align-items-center">
                        


    <div class="header-title">
        <h1>
            Home
                    <small>
                        <i class="fa fa-angle-right"></i>
                        Desktop
                    </small>
        </h1>
    </div>

                    </div>
                </div>
            </div>
            <div class="container-fluid">
                

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
<input class="form-control col-md-3 col-sm-4 col-xs-6" id="myInput" type="text" placeholder="Search..">
<br />
<br />
<div class="container">
    <div  id="myDIV"  class="row">

                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="emulador project64">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">emulador project64</h5>
                                <p class="card-text">project64.exe</p>
                                <a href="project64.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="overwatch">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">overwatch</h5>
                                <p class="card-text">overwatch.exe</p>
                                <a href="overwatch.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="YouTube">
                            <img class="card-img-top" src="../../assets/images/YouTube.png">
                            <div class="card-body">
                                <h5 class="card-title">YouTube</h5>
                                <p class="card-text">Google Inc.</p>
                                <a href="https://www.youtube.com/" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Canal de Denuncias">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Canal de Denuncias</h5>
                                <p class="card-text">https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx</p>
                                <a href="https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Cipher">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Cipher</h5>
                                <p class="card-text">www.cipher.cl</p>
                                <a href="www.cipher.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Terraria">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Terraria</h5>
                                <p class="card-text">shared/terraria.exe</p>
                                <a href="shared/terraria.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Revista And&#233;n">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Revista And&#233;n</h5>
                                <p class="card-text">http://nt25_intranet/archivos/revistas/2017-03/revista.pdf</p>
                                <a href="http://nt25_intranet/archivos/revistas/2017-03/revista.pdf" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Smov2">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Smov2</h5>
                                <p class="card-text">\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe</p>
                                <a href="\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Concursos internos">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Concursos internos</h5>
                                <p class="card-text">https://metro.openagora.cl/</p>
                                <a href="https://metro.openagora.cl/" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="The Clinic">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">The Clinic</h5>
                                <p class="card-text">www.theclinic.cl</p>
                                <a href="www.theclinic.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Hotmail">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Hotmail</h5>
                                <p class="card-text">http://www.hotmail.com</p>
                                <a href="http://www.hotmail.com" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Gmail">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Gmail</h5>
                                <p class="card-text">http://www.gmail.com</p>
                                <a href="http://www.gmail.com" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="CNN">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">CNN</h5>
                                <p class="card-text">www.cnn.org</p>
                                <a href="www.cnn.org" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Metro Familia">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Metro Familia</h5>
                                <p class="card-text">http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia</p>
                                <a href="http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="League of Legends">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">League of Legends</h5>
                                <p class="card-text">lollauncher.exe</p>
                                <a href="lollauncher.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Minecraft Java Edition">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Minecraft Java Edition</h5>
                                <p class="card-text">minecraft.exe</p>
                                <a href="minecraft.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Webmail Metro">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Webmail Metro</h5>
                                <p class="card-text">https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&amp;url=https%3a%2f%2fmail.metro.cl%2fowa%2f</p>
                                <a href="https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&amp;url=https%3a%2f%2fmail.metro.cl%2fowa%2f" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Autoconsulta ESS">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Autoconsulta ESS</h5>
                                <p class="card-text">http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0</p>
                                <a href="http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="And&#233;n Social">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">And&#233;n Social</h5>
                                <p class="card-text">http://andensocial.metro.cl</p>
                                <a href="http://andensocial.metro.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Sitio Conductores">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Sitio Conductores</h5>
                                <p class="card-text">http://operaciones.metrosantiago.cl/</p>
                                <a href="http://operaciones.metrosantiago.cl/" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


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



            </div>
            <footer class="footer text-center">
<div class="modal" id="loginModal"><div class="modal-dialog modal-lg"><div class="modal-content">                    <div id="login"></div>
</div></div></div>                
            </footer>
        </div>
    </div>
    <script src="/assets/libs/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="/assets/libs/popper.js/dist/umd/popper.min.js"></script>
    <script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
    <script src="/assets/extra-libs/sparkline/sparkline.js"></script>
    <!--Wave Effects -->
    <script src="/dist/js/waves.js"></script>
    <!--Menu sidebar -->
    <script src="/dist/js/sidebarmenu.js"></script>
    <!--Custom JavaScript -->
    <script src="/dist/js/custom.min.js"></script>
    <script src="/dist/js/core.js"></script>
    <script src="/assets/libs/toastr/build/toastr.min.js"></script>
    <script src="/assets/libs/select2/dist/js/select2.full.min.js"></script>
    <script src="/assets/libs/select2/dist/js/select2.min.js"></script>
    <script src="/assets/libs/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="/assets/libs/bootbox/bootbox.js"></script>

    <!--This page JavaScript -->
    <!-- <script src="~/dist/js/pages/dashboards/dashboard1.js"></script> -->
    <!-- Charts js Files -->

    <!--Success Modal Templates-->
<div class="modal fade modal-message modal-success" id="modal-success"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">        <i class="far fa-check-circle"></i>
</div><div class="modal-title">        Correcto
</div><div class="modal-body">        La solicitud se efectuó con éxito
</div><div class="modal-footer"><button class="btn btn-success " data-dismiss="modal" type="button">Aceptar</button></div></div></div></div>
<!--End Success Modal Templates-->
<!--Info Modal Templates-->
<div class="modal fade modal-message modal-info" id="modal-info"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">        <i class="fa fa-envelope"></i>
</div><div class="modal-title">        Información
</div><div class="modal-body">        Se le notifica información importante
</div><div class="modal-footer"><button class="btn btn-info " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Info Modal Templates-->
<!--Danger Modal Templates-->
<div class="modal fade modal-message modal-danger" id="modal-danger"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">        <i class="glyphicon glyphicon-fire"></i>
</div><div class="modal-title">        Error
</div><div class="modal-body">        Se ha producido un error
</div><div class="modal-footer"><button class="btn btn-danger " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Danger Modal Templates-->
<!--Warning Modal Templates-->
<div class="modal fade modal-message modal-warning" id="modal-warning"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">        <i class="fa fa-warning"></i>
</div><div class="modal-title">        Alerta
</div><div class="modal-body">        Algo ha salido mal
</div><div class="modal-footer"><button class="btn btn-warning " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Warning Modal Templates-->
<!--Confirm Modal Templates-->
<div id="core_modalconfirmdialog" style="display:none;">
    <div class="row">
        <div class="col-md-12">
            <div class="modal-header">
                <i class="fa fa-warning"></i>
            </div>
            <div class="modal-body">
                Mensaje
            </div>
            <div class="modal-body">
                Mensaje que iría en el centro
            </div>
        </div>
    </div>
</div>
<!--Confirm Modal Templates-->


</body>

</html>

Soumyanjan Dey · Answer 3 · 08 ноября 2019

$('#box').keyup(function(){
   var valThis = $(this).val().toLowerCase();
    if(valThis === ""){
        $('.library_card > div').show();
    } else {
        $('.library_card > div').each(function(){
            var text = $(this).text().toLowerCase();
            (text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();
        });
   };
});



// #box-- inpuut type text id
// .library_card -- div class

Как правильно отфильтровать загрузочную карту HTMLDivElement?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 3 ]

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

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

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

Как правильно отфильтровать загрузочную карту HTMLDivElement?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 3 ]

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

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

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

Похожие темы