Question

我正在尝试添加一个文本搜索字段，以过滤内容。但是，我拥有的代码将过滤掉所有不匹配的内容，包括我想包含的<div>的一部分。

换句话说，我想进行一次文本搜索，该搜索将搜索一系列<div>的标题/标题，然后根据标题返回该<div>的全部内容

<input id="ddInput" type="text" placeholder="Search...">

   <div class="grpContainer">
        <div class="ddCard">
            <div class="ddCardHeader">
                <h3>Header/Title</h3>
            </div>
            <div class="ddCardContent">
              <p>This is the content.</p>

                <div class="ddMoreInfo">
                    <a href="">More Info</a>
                </div>
                <div class="ddCardFooter">
                  <p>Footer content</p>
                </div>
            </div>
        </div>

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

查看我的小提琴：https://codepen.io/anon/pen/zQVreM

在小提琴中，尝试搜索“标题”以查看会发生什么。我希望发生的事情是显示了整个卡片。

Answer 1

这是您脚本的更新版本：

$(document).ready(function() {
    $("#ddInput").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $(".grpContainer .ddCard").each(function() {
            $(this).toggle(this.innerText.toLowerCase().indexOf(value) > -1)
        });
    });
});

它使用each而不是filter
它会在整张卡片中寻找匹配的文本
它使用innerText属性查找匹配项

Answer 2

您无需同时使用toggle和filter。

您可以隐藏所有卡片，过滤出匹配的卡片，然后仅显示这些卡片。

var $cards = $(".grpContainer .ddCard");
$cards
  .hide()
  .filter(function() { return $(this).text().toLowerCase().indexOf(value) > -1 })
  .show();

$("#ddInput").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  var $cards = $(".grpContainer .ddCard");
  $cards
    .hide()
    .filter(function() { return $(this).text().toLowerCase().indexOf(value) > -1 })
    .show();
});

html {
  scroll-behavior: smooth;
}

.now-content ul li:before {
  background-image: none;
}

.pageFooter {
  width: 100%;
  background-color: #000;
}

.ddPageWrap {
  min-height: 750px;
}

.grpContainer {
  width: 95%;
  margin: 20px auto 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.ddCard {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  flex-direction: column;
  flex: 0 0 100%;
  margin: 1rem auto;
  border: 1px solid #323232;
}

.ddCardHeader {
  display: flex;
  flex-direction: column;
  margin-bottom: auto;
  align-self: flex-start;
  padding: .5em;
}

.ddCardFooter {
  margin-top: auto;
  display: block;
  padding: .5em;
  border-top: .5px solid #ccc;
}

.ddCardFooter p {
  color: #626262;
  font-size: 15px;
}

.fa-ul {
  padding-left: 0 !important;
  margin-left: 1em !important;
}

.fa-ul li {
  color: #626262 !important;
  font-size: 15px !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

.ddCardContent {
  padding: .5em;
}

.ddMoreInfo {
  display: inline-block;
  padding: 10px;
  background-color: #0052e7;
  margin-bottom: 10px;
  border-radius: 5%;
  border: 1px solid #0052e7;
  cursor: pointer;
}

.ddMoreInfo a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
}

.ddMoreInfo:hover {
  background-color: #fff;
  transition: .1s ease;
  border: 1px solid #0052e7;
}

.ddMoreInfo:hover a {
  color: #0052e7;
}

.ddBtn {
  display: inline-block;
  border: none;
  outline: none;
  padding: 12px 16px;
  margin: 0.4em auto;
  background-color: #f1f1f1;
  cursor: pointer;
  transition: all 0.2s;
}

.ddBtn:hover {
  background-color: #ddd;
}

.ddBtn.active {
  background-color: #666;
  color: white;
}

@media all and (max-width: 800px) {
  .ddBtn {
    display: block;
    margin: 0.4em auto;
    width: 100%;
  }
}

.ddToolTip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted #0052e7;
  cursor: pointer;
  width: auto;
}

.ddToolTip .ddToolTipText {
  visibility: hidden;
  min-width: 240px;
  background-color: black;
  color: #fff;
  border-radius: 5%;
  left: 50%;
  padding: 5px 10px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 1s;
  line-height: 1.2;
  font-size: 13px;
}

.ddToolTip .ddToolTipText::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 30%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.ddToolTip:hover .ddToolTipText {
  visibility: visible;
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="ddInput" type="text" placeholder="Search...">

<div class="grpContainer">
  <div class="ddCard">
    <div class="ddCardHeader">
      <h3>Header/Title</h3>
    </div>
    <div class="ddCardContent">
      <p>This is the content.</p>

      <div class="ddMoreInfo">
        <a href="">More Info</a>
      </div>
      <div class="ddCardFooter">
        <p>Footer content</p>
      </div>
    </div>
  </div>
  <div class="ddCard">
    <div class="ddCardHeader">
      <h3>Other Card</h3>
    </div>
    <div class="ddCardContent">
      <p>More stuff</p>

      <div class="ddMoreInfo">
        <a href="">Other info</a>
      </div>
      <div class="ddCardFooter">
        <p>Footer</p>
      </div>
    </div>
  </div>
</div>

文本过滤一组DIV

2 个答案: