Fatal编程技术网
  • javascript/
  • Javascript 卡列字段的引导Jquery搜索筛选器

Javascript 卡列字段的引导Jquery搜索筛选器

javascript jquery bootstrap-4

Javascript 卡列字段的引导Jquery搜索筛选器,javascript,jquery,bootstrap-4,Javascript,Jquery,Bootstrap 4,如何根据卡片标题过滤结果 快速查看： JQUERY： $(document).ready(function(){ $("#myInput").on("keyup", function() { <NEED HELP HERE> }); }); $（文档）.ready（函数（）{ $（“#myInput”）。在（“keyup”，function（）上{ }); }); HTML: 卡片标题 支持卡字幕 在卡片标题上构建一些快速示例文本 卡片标题 支持卡字幕 在

如何根据
卡片标题
过滤结果

快速查看：

JQUERY：

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
      <NEED HELP HERE>
  });
});

$（文档）.ready（函数（）{
$（“#myInput”）。在（“keyup”，function（）上{
});
});
HTML:




卡片标题
支持卡字幕

在卡片标题上构建一些快速示例文本

卡片标题
支持卡字幕

在卡片标题上构建一些快速示例文本

卡片标题
支持卡字幕

在卡片标题上构建一些快速示例文本



卡片标题
支持卡字幕

在卡片标题上构建一些快速示例文本

卡片标题
支持卡字幕

在卡片标题上构建一些快速示例文本

卡片标题
支持卡字幕

在卡片标题上构建一些快速示例文本



卡片标题
支持卡字幕

在卡片标题上构建一些快速示例文本

卡片标题
支持卡字幕

在卡片标题上构建一些快速示例文本

卡片标题
支持卡字幕

在卡片标题上构建一些快速示例文本



卡片标题
支持卡字幕

在卡片标题上构建一些快速示例文本

卡片标题
支持卡字幕

在卡片标题上构建一些快速示例文本

不同标题
支持卡字幕

在卡片标题上构建一些快速示例文本
我从你的代码笔中调整了js，以便它根据包含的
h4
文本过滤卡片div-这就是你想要做的吗

$（文档）.ready（函数（）{
$（“#myInput”）。在（“keyup”，function（）上{
var value=$（this.val（）.toLowerCase（）；
$（“#MyCards.card”）.filter（函数（）{
$（this）.toggle（$（this）.find（'h4'）.text（）.toLowerCase（）.indexOf（value）>-1）
});
});

});
我从你的代码笔中调整了js，以便它根据包含的
h4
文本过滤卡片div-这就是你想要做的吗

$（文档）.ready（函数（）{
$（“#myInput”）。在（“keyup”，function（）上{
var value=$（this.val（）.toLowerCase（）；
$（“#MyCards.card”）.filter（函数（）{
$（this）.toggle（$（this）.find（'h4'）.text（）.toLowerCase（）.indexOf（value）>-1）
});
});

});谢谢，效果很好，但是想知道为什么过滤器没有获取
DIFF title
：@ArbazzHussain抱歉，我不明白-为什么？另外，如果这回答了您的问题，您能将其标记为已接受吗？谢谢，就像魅力一样，但想知道为什么过滤器无法获取
DIFF title
：@ArbazzHussain抱歉，我不明白-为什么？此外，如果这回答了您的问题，您是否可以将其标记为已接受？

<body>
  <div class="col-sm-10 col-sm-offset-1 col-md-11 col-md-offset-1 main">
          <input type="text" id="myInput" value="" class="form-control form-control-lg form-control-borderles" placeholder="Filtering | Search Bar">
    </input>
  </div>
<br>
  <div class="py-5">
    <div class="container" id="MyCards">
      <div class="row hidden-md-up">
        <div class="col-md-4">
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">Card title</h4>
              <h6 class="card-subtitle text-muted">Support card subtitle</h6>
              <p class="card-text p-y-1">Some quick example text to build on the card title .</p>
              <a href="#" class="card-link">link</a>
              <a href="#" class="card-link">Second link</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">Card title</h4>
              <h6 class="card-subtitle text-muted">Support card subtitle</h6>
              <p class="card-text p-y-1">Some quick example text to build on the card title .</p>
              <a href="#" class="card-link">link</a>
              <a href="#" class="card-link">Second link</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">Card title</h4>
              <h6 class="card-subtitle text-muted">Support card subtitle</h6>
              <p class="card-text p-y-1">Some quick example text to build on the card title .</p>
              <a href="#" class="card-link">link</a>
              <a href="#" class="card-link">Second link</a>
            </div>
          </div>
        </div>
      </div><br>

      <div class="row hidden-md-up">
        <div class="col-md-4">
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">Card title</h4>
              <h6 class="card-subtitle text-muted">Support card subtitle</h6>
              <p class="card-text p-y-1">Some quick example text to build on the card title .</p>
              <a href="#" class="card-link">link</a>
              <a href="#" class="card-link">Second link</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">Card title</h4>
              <h6 class="card-subtitle text-muted">Support card subtitle</h6>
              <p class="card-text p-y-1">Some quick example text to build on the card title .</p>
              <a href="#" class="card-link">link</a>
              <a href="#" class="card-link">Second link</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">Card title</h4>
              <h6 class="card-subtitle text-muted">Support card subtitle</h6>
              <p class="card-text p-y-1">Some quick example text to build on the card title .</p>
              <a href="#" class="card-link">link</a>
              <a href="#" class="card-link">Second link</a>
            </div>
          </div>
        </div>
      </div><br>

      <body>
  <div class="py-5">
    <div class="container">
      <div class="row hidden-md-up">
        <div class="col-md-4">
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">Card title</h4>
              <h6 class="card-subtitle text-muted">Support card subtitle</h6>
              <p class="card-text p-y-1">Some quick example text to build on the card title .</p>
              <a href="#" class="card-link">link</a>
              <a href="#" class="card-link">Second link</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">Card title</h4>
              <h6 class="card-subtitle text-muted">Support card subtitle</h6>
              <p class="card-text p-y-1">Some quick example text to build on the card title .</p>
              <a href="#" class="card-link">link</a>
              <a href="#" class="card-link">Second link</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">Card title</h4>
              <h6 class="card-subtitle text-muted">Support card subtitle</h6>
              <p class="card-text p-y-1">Some quick example text to build on the card title .</p>
              <a href="#" class="card-link">link</a>
              <a href="#" class="card-link">Second link</a>
            </div>
          </div>
        </div>
      </div><br>

      <div class="row hidden-md-up">
        <div class="col-md-4">
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">Card title</h4>
              <h6 class="card-subtitle text-muted">Support card subtitle</h6>
              <p class="card-text p-y-1">Some quick example text to build on the card title .</p>
              <a href="#" class="card-link">link</a>
              <a href="#" class="card-link">Second link</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">Card title</h4>
              <h6 class="card-subtitle text-muted">Support card subtitle</h6>
              <p class="card-text p-y-1">Some quick example text to build on the card title .</p>
              <a href="#" class="card-link">link</a>
              <a href="#" class="card-link">Second link</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">DIFF title</h4>
              <h6 class="card-subtitle text-muted">Support card subtitle</h6>
              <p class="card-text p-y-1">Some quick example text to build on the card title .</p>
              <a href="#" class="card-link">link</a>
              <a href="#" class="card-link">Second link</a>
            </div>
          </div>
        </div>
      </div><br>

      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
  <script src="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-alpha.6.min.js"></script>
</body>

      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
  <script src="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-alpha.6.min.js"></script>
</body>