javascript - 搜索 div 及其所有子项内的文本

Question

当输入表单中没有我正在编写的文本时，我想隐藏整个 div。 现在，我可以在所有子 div 内部进行搜索，如果没有文本，则隐藏每个子 div。 但我现在有一个问题，例如:

<div class="col-9 infos">
    <div class="row">
        <div class="col-4 nome">
            <b>Nome: </b> Davide
        </div>
        <div class="col-4 regione">
            <b>Regione: </b> Reggio
        </div>
        <div class="col-4 citta">
            <b>Città: </b>Citta "
        </div>
    </div>
    <div class="row">
        <div class="col-4 dataNascita">
            <b>Data di nascita: </b>02-02-1992
        </div>
        <div class="col-4 coaching">
            <b>Coaching online: </b>Sì
        </div>
        <div class="col-4 sesso">
            <b>Sesso: </b>Maschio
        </div>
    </div>
    <div class="row border-bottom">
        <div class="col-6 blurry-text cellulare">
            <b>Cellulare: </b> 1231231231
        </div>
        <div class="col-6 blurry-text email">
            <b>Email: </b>asdaklsnd@gmail.com
        </div>
    </div>
    <div class="row descriptionText">
        <div class='col-10 descrizione'> aksjdbaksjbdkajs asdasdas </div>
        <div class='col-2 align-items-center'>
            <button type='button'>Profilo</button>
        </div>
    </div>
</div>

如果我搜索 Davide，.infos div 的所有其他子级都将被隐藏，因为它们不包含文本，但如果有另一个子级实际包含文本，我想让它们保持可见。

我在这里创建了一个示例用于测试:https://jsfiddle.net/hj9r2L4u/6/ 我希望能够在搜索栏输入更多单词，图像有 2 个名为 Davide 的用户，但城市不同，我想输入类似的内容

大城2

使用“Da”时，我实际上显示了两个 div，然后使用 City2 时，我隐藏了其中没有文本的 div。

我实际使用的代码是:

jQuery("#searchPt").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    jQuery(".information").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
});

Answer 1

您可以将行换行并将其作为包含元素，请参阅下面的代码片段:-

jQuery("#searchPt").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  jQuery('.row').filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container w-100 h-100">
  <input id="searchPt">
  <div id="goToProfile">
    <div class="information">
      <div>
        <img alt="Immagine profilo">
        <div class="results">
          <div class="results-content">
            <span class="stars">3</span>
          </div>
        </div>
      </div>
      <div class="col-9 infos">
      
        <div class="rowWrap">
          <div class="row">
            <div class="col-4 nome\"><b>Nome: </b> Davide </div>
            <div class="col-4 regione\"><b>Regione: </b> Reggio </div>
            <div class="col-4 citta\"><b>Città: </b>Citta "</div>
          </div>
          <div class="row">
            <div class="col-4 dataNascita\"><b>Data di nascita: </b>02-02-1992</div>
            <div class="col-4 coaching\"><b>Coaching online: </b>Sì</div>
            <div class="col-4 sesso\"><b>Sesso: </b>Maschio</div>
          </div>
          <div>
          
            <div class="rowWrap">
              <div class="row border-bottom\">
                <div class="col-6 blurry-text cellulare\"><b>Cellulare: </b> 1231231231 </div>
                <div class="col-6 blurry-text email\"><b>Email: </b>asdaklsnd@gmail.com</div>
              </div>
              <div class="row descriptionText \">
                <div class='col-10 descrizione'> aksjdbaksjbdkajs asdasdas </div>
                <div class='col-2 align-items-center'><button type='button'>Profilo</button></div>
              </div>
            </div>

          </div>
          <div class="information">
            <div>
              <img alt="Immagine profilo">
              <div class="results">
                <div class="results-content">
                  <span class="stars">3</span>
                </div>
              </div>
            </div>
            <div class="col-9 infos">
              <div class="row">
                <div class="col-4 nome\"><b>Nome: </b> Simone </div>
                <div class="col-4 regione\"><b>Regione: </b> Reggio </div>
                <div class="col-4 citta\"><b>Città: </b>Emilia</div>
              </div>
              <div class="row\">
                <div class="col-4 dataNascita\"><b>Data di nascita: </b>02-04-1992</div>
                <div class="col-4 coaching\"><b>Coaching online: </b>No</div>
                <div class="col-4 sesso\"><b>Sesso: </b>Femmina</div>
              </div>
              <div class="row border-bottom\">
                <div class="col-6 blurry-text cellulare\"><b>Cellulare: </b> 1231231231 </div>
                <div class="col-6 blurry-text email\"><b>Email: </b>asdakl12412snd@gmail.com</div>
              </div>
              <div class="row descriptionText \">
                <div class='col-10 descrizione'> aksjdbaksjb15251212612612612dkajs asdasdas </div>
                <div class='col-2 align-items-center'><button type='button'>Profilo</button></div>
              </div>
            </div>
          </div>
        </div>
      </div>