搜索输入无法正常工作

时间：2018-03-01 09:41:03

标签： javascript jquery html html5

我正在进行实时搜索，但我不知道当我输入任何关键图像时我错误的地方变得隐藏过滤器无法正常工作。我希望将搜索到的值显示为我在html文件中创建的卡片视图。我工作差不多1天，但我没有得到你想要的答案。

jQuery(document).ready(function($) {
    $('.myImg').each(function() {
        $(this).attr('alt', $(this).text().toLowerCase());
    });
    $('.live-search-box').on('keyup', function() {
        var searchTerm = $(this).val().toLowerCase();
        $('.myImg').each(function() {
            if ($(this).filter('[alt *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });
});
html,body{
     margin: 0;
     padding: 0;
     font-size: 100%;
}
 #stripe img{
     margin-bottom: 15px;
}
 h1{
     color: white;
     font-size: 2em;
     font-family: 'Butcherman', cursive;
     font-weight: normal;
     text-align: center;
     text-transform: uppercase;
}
 img + h1{
     display: inline-block;
}
 #stripe{
     position: relative;
     background: #404040;
     height: 70px;
     text-align: center;
     right: 0;
}
 .card {
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
     transition: 0.3s;
}
 .card:hover {
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
 h4{
     text-align: center;
     padding: 10px;
     font-weight: bold;
     font-size: 15px;
}
 #sec2{
     position: relative;
     width: 100%;
     top: 30px;
}
 .live-search-box {
     width: 100%;
     display: block;
     padding: 1em;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     border: 1px solid #3498db;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
}
<head>
   <title>test video</title>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <link href="https://fonts.googleapis.com/css?family=Butcherman&amp;subset=latin-ext" rel="stylesheet">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="test.js"></script>
</head>
<body>
   <div id="stripe">
      <img src="logo/mask.png">
      <h1>My Website</h1>
   </div>
   <input type="text" class="live-search-box" placeholder="search here" />
   <section id="sec2">
      <div class="container-fluid">
         <div class="container">
            <div class="row">
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="John Doe" style="width:100%">
                     <h4>John Doe</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Steve John" style="width:100%">
                     <h4>Steve John</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="John Cenna" style="width:100%">
                     <h4>John Cenna</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Mark William" style="width:100%">
                     <h4>Mark William</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="William Wordssmith" style="width:100%">
                     <h4>William Wordssmith</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Jason Wathson" style="width:100%">
                     <h4>Jason Wathson</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Jimmy Coogan" style="width:100%">
                     <h4>Jimmy Coogan</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Mark Zuckerberg" style="width:100%">
                     <h4>Mark Zuckerberg</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Sharukh Khan" style="width:100%">
                     <h4>Sharukh Khan</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Hrithik Roshan" style="width:100%">
                     <h4>Hrithik Roshan</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Salman Khan" style="width:100%">
                     <h4>Salman Khan</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Shahid Kapoor" style="width:100%">
                     <h4>Shahid Kapoor</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Dibendu Mondal" style="width:100%">
                     <h4>Dibendu Mondal</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Sudip Barik" style="width:100%">
                     <h4>Sudip Barik</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Masum Abdulla" style="width:100%">
                     <h4>Masum Abdulla</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Debabrata Maji" style="width:100%">
                     <h4>Debabrata Maji</h4>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </section>
</body>

3 个答案:

答案 0 :(得分：2)

我做了一些修改：

  • 以避免更改alt属性
  • 选择包含图片的col-*。它可以改进。
  • 使用each传递给函数的参数。

＆＃13;
＆＃13; 
jQuery(document).ready(function($) {

  $('.live-search-box').on('keyup', function() {

    var searchTerm = $(this).val().toLowerCase();
      $('.myImg').each(function(idx, item) {
        var alt = $(item).attr("alt").toLowerCase();

        if (alt.indexOf(searchTerm) >= 0 ||searchTerm.length < 1) {
            $(item).parent().parent().show();
        } else {
            $(item).parent().parent().hide();
        }

      });

  });

});
＆＃13; 
html,body{
     margin: 0;
     padding: 0;
     font-size: 100%;
}
 #stripe img{
     margin-bottom: 15px;
}
 h1{
     color: white;
     font-size: 2em;
     font-family: 'Butcherman', cursive;
     font-weight: normal;
     text-align: center;
     text-transform: uppercase;
}
 img + h1{
     display: inline-block;
}
 #stripe{
     position: relative;
     background: #404040;
     height: 70px;
     text-align: center;
     right: 0;
}
 .card {
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
     transition: 0.3s;
}
 .card:hover {
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
 h4{
     text-align: center;
     padding: 10px;
     font-weight: bold;
     font-size: 15px;
}
 #sec2{
     position: relative;
     width: 100%;
     top: 30px;
}
 .live-search-box {
     width: 100%;
     display: block;
     padding: 1em;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     border: 1px solid #3498db;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
}
＆＃13; 
<head>
   <title>test video</title>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <link href="https://fonts.googleapis.com/css?family=Butcherman&amp;subset=latin-ext" rel="stylesheet">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="test.js"></script>
</head>
<body>
   <div id="stripe">
      <img src="logo/mask.png">
      <h1>My Website</h1>
   </div>
   <input type="text" class="live-search-box" placeholder="search here" />
   <section id="sec2">
      <div class="container-fluid">
         <div class="container">
            <div class="row">
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="John Doe" style="width:100%">
                     <h4>John Doe</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Steve John" style="width:100%">
                     <h4>Steve John</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="John Cenna" style="width:100%">
                     <h4>John Cenna</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Mark William" style="width:100%">
                     <h4>Mark William</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="William Wordssmith" style="width:100%">
                     <h4>William Wordssmith</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Jason Wathson" style="width:100%">
                     <h4>Jason Wathson</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Jimmy Coogan" style="width:100%">
                     <h4>Jimmy Coogan</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Mark Zuckerberg" style="width:100%">
                     <h4>Mark Zuckerberg</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Sharukh Khan" style="width:100%">
                     <h4>Sharukh Khan</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Hrithik Roshan" style="width:100%">
                     <h4>Hrithik Roshan</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Salman Khan" style="width:100%">
                     <h4>Salman Khan</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Shahid Kapoor" style="width:100%">
                     <h4>Shahid Kapoor</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Dibendu Mondal" style="width:100%">
                     <h4>Dibendu Mondal</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Sudip Barik" style="width:100%">
                     <h4>Sudip Barik</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Masum Abdulla" style="width:100%">
                     <h4>Masum Abdulla</h4>
                  </div>
               </div>
               <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                     <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Debabrata Maji" style="width:100%">
                     <h4>Debabrata Maji</h4>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </section>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

只需替换此代码即可。这适用于代码。

jQuery(document).ready(function ($) {
    $('.myImg').each(function () {
        $(this).attr('alt', $(this).next().text().toLowerCase());
    });

    $('.live-search-box').on('keyup', function () {
        var searchTerm = $(this).val().toLowerCase();
        $('.myImg').each(function () {
            if ($(this).filter('[alt *= ' + searchTerm + ']').length > 0 
                     || searchTerm.length < 1) {
                $(this).parent().parent().show();
            } else {
                $(this).parent().parent().hide();
            }
        });
    });
});

答案 2 :(得分：0)

当前代码生成$(...).attr(...).text is not a function

更改

$(this).attr('alt', $(this).text().toLowerCase());

到

$(this).attr('alt', $(this).attr('alt').toLowerCase());
相关问题
最新问题