CODEWITHSUNDEEP
javascriptjqueryhtmlstring
Fanto88
Fanto88

Reputation: 68

Search for text inside div and all his childs

I would like to hide an entire div when there isn't the text i'm writing inside a input form. For now i'm able to search inside all childs div and hide every child div if there isn't the text. But i have a problem right now, example:

<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>[email protected]
        </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>

if i search Davide all the others childs of the .infos div will be hidden since they doesn't contain the text, but i would like to keep them visible if there is another child that actually contain the text.

I've created an example here for testing : https://jsfiddle.net/hj9r2L4u/6/ I would like to have the possibility to input more words for the search bar, image having 2 users with name Davide, but with different city, i would like to input something like

Da City2

With "Da" i actually show both div, then with City2 i hide the div that doesn't have the text in it.

The code i'm actually using is:

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

Upvotes: 0

Views: 934

Answers (2)

Jeff
Jeff

Reputation: 382

For multiple criteria, do a split and test each value with some short-circuit logic:

jQuery("#searchPt").on("keyup", function() {
    var value = $(this).val().toLowerCase().split();
    jQuery(".information").filter(function() {
        for(var i=0; i<value.length; i++){
           if($(this).text().toLowerCase().indexOf(value[i]) === -1) {
              $(this).toggle(false)
              return false; 
           }
        }
        $(this).toggle(true);
        return true
    });
});

Upvotes: 0

YenHub
YenHub

Reputation: 93

You could wrap the rows and target this as the containing element, see the snippet below:- 

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>[email protected]</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>[email protected]</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>

Upvotes: 2

Related Questions