Reputation: 309

Live search on an Div with input filter

I have some troubbles with a live search script.

I have some div as "rows" and some p as "columns" declared

The input fild as #filter should hide all "rows" (div) with no relevance

$('#results div').hide();

But it seems I have some miss understood.

Can some one help me? thx

Upvotes: 10

Answers (5)

Rayyan007

Reputation: 21

function getValue(val){  
     //search goes here (you can use either startswith or includes)
  
     document.querySelectorAll('.item').forEach(item => {
       if(item.textContent.toLowerCase().startsWith(val.toLowerCase())) {
         item.style.display = 'block';
       } else {
         item.style.display = 'none';
       }
     });
}

ul {
list-style-type: none;
}

<input type="text" placeholder="Please type.." onkeyup="getValue(this.value)">
 
<div id="result">
  <ul>
    <li class="item">HXML</li>
    <li class="item">CPP</li>
    <li class="item">FHF</li>
    <li class="item">Coffeescript</li>
    <li class="item">Tart</li>
    <li class="item">Cython</li>
    <li class="item">Swift</li>
    <li class="item">Gava</li>
    <li class="item">C++</li>
    <li class="item">GoKart</li>
    <li class="item">SCSS</li>
    <li class="item">C</li>
    <li class="item">LASS</li>
    <li class="item">Pearl</li>
    <li class="item">Rooby</li>
  </ul>
</div>

Here is a version with pure javascript

Upvotes: 0

Felipe Genuino

Reputation: 39

Complete filter with feedback

credits from @itay-ganor

Im add feedback and card style.

$('.globalSearchResultNoFoundFeedback').hide()
  $(".globalInputSearch").keyup(function() {

    // Retrieve the input field text and reset the count to zero
    var filter = $(this).val(),
      count = 0;
      
       if (count == 0) {
          $('.globalSearchResultNoFoundFeedback').hide()
       }
        

    // Loop through the comment list
    $('.globalTargetList li').each(function() {
      // If the list item does not contain the text phrase fade it out

      if ($(this).text().search(new RegExp(filter, "i")) < 0) {
        $(this).hide(); // MY CHANGE
        if (count == 0) {
          $('.globalSearchResultNoFoundFeedback').show()
        } else {
          $('.globalSearchResultNoFoundFeedback').hide()
        }
        // Show the list item if the phrase matches and increase the count by 1
      } else {
        $(this).show(); // MY CHANGE
        count++;

      }

    });

});

body{background:#d7dbd7; font-family: Roboto, sans-serif; padding: 20px;}

.globalInputSearch{ padding: 10px 20px;  border: none; padding-right: 32px; font-size: 18px;  padding-left: 20px;  border-radius: 3px; box-shadow: 0 1px 1px 0 rgba(0,0,0,.06), 0 2px 5px 0 rgba(0,0,0,.2);}
.globalTargetList{ display: flex;  list-style: none;  padding: 0; flex-direction: column;}
.globalTargetList li .card{ margin-bottom: 10px; padding: 20px; background: #fff;  box-shadow: 0 1px 1px 0 rgba(0,0,0,.06), 0 2px 5px 0 rgba(0,0,0,.2); border-radius: 3px;}
.globalTargetList li h4{margin: 0 0 10px 0;  font-weight: 400;  font-size: 22px; line-height: 21px;}
.globalTargetList li h6 { margin: 0; font-weight: 400;  font-size: 13px; opacity: 0.6;}
.globalTargetList li p{ font-weight: 400; font-size: 14px;  line-height: 20px; }
.globalSearchResultNoFoundFeedback{font-size: 30px;  padding: 20px; color: #999; text-align: center;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>

<body>
  <!-- search input -->
  <input class="globalInputSearch" type="text" placeholder="Search for anything">

  <!-- list -->
  <ul class="globalTargetList">
    <li>
      <div class="card">
        <h4>Paçoca </h4>
        <p> Paçoca de amendoim, ou Capiroçava, é um doce tradicional brasileiro à base de amendoim, farinha de mandioca e açúcar, típico da comida caipira do estado de São Paulo. É tradicionalmente preparada no Brasil para consumo nas festividades da Semana Santa e festas juninas. </p>
        <h6> <strong> Lugar de origem:</strong>  Brasil </span> </h6>
      </div>
    </li>
    <li>
      <div class="card">
        <h4>Ganache </h4>
        <p>Ganache é uma mistura cremosa de chocolate e creme de leite, utilizado como cobertura ou recheio de bolos, cupcakes e outros itens de confeitaria. Ganache normalmente é feito aquecendo-se o creme, sendo adicionado em seguida o chocolate meio-amargo picado. </p>
        <h6> <strong> Lugar de origem:</strong>  França </span> </h6>
      </div>
    </li>
    <li>
      <div class="card">
        <h4>Apfelstrudel </h4>
        <p> O Apfelstrudel é uma sobremesa tradicional austríaca, nascida em Viena, tendo-se tornado popular internacionalmente. É a receita mais conhecida com a massa folhada da Europa central, conhecida em Alemão por Strudel. Pensa-se que tenha sido influenciada pelas cozinhas do Império Bizantino, da Arménia e da Turquia. </p>
        <h6> <strong> Lugar de origem:</strong>  Áustria </span> </h6>
      </div>
    </li>
  </ul>


  <!-- feedback -->
  <div class="globalSearchResultNoFoundFeedback" aria-live="polite"> Feedback nothing found</div>
</body>

Upvotes: 2

Федор Мойсеенок

Reputation: 11

Thank you very much! It helped me a lot. I got this code:

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="icon" href="favicon.ico" type="image/x-icon">

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>


<style> 
    input[type=text] {
        width: 100%;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        background-color: white;
        background-image: url('searchicon.png');
        background-position: 10px 10px; 
        background-repeat: no-repeat;
        padding: 12px 20px 12px 40px;
    }
    .ytube {
        width: 90%;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        background-color: white;
        background-image: url('arrow.png');
        background-position: 10px 10px; 
        background-repeat: no-repeat;
        padding: 12px 20px 12px 40px;
    }
</style>
<script type="text/javascript">
    window.onload=function(){      
    $("#filter").keyup(function() {

      var filter = $(this).val(),
        count = 0;

      $('#results div').each(function() {

        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
          $(this).hide();

        } else {
          $(this).show();
          count++;
        }
      });
    });
    }
    </script>

 </head>
 <body>
    <header id="header">
    <div id="stuck_container">

    <input id="filter" type="text" placeholder="Keywords"/>

    </div>
    </header>

<section id="content">

<div id="results">

    <div class="results"><div class="ytube"><a  style="font-weight: bold; font-size: 18px;">Text 1</a></div></div>
    <div class="results"><div class="ytube"><a  style="font-weight: bold; font-size: 18px;">Text 6543</a></div></div>
    <div class="results"><div class="ytube"><a  style="font-weight: bold; font-size: 18px;">Text World 1</a></div></div>
    <div class="results"><div class="ytube"><a  style="font-weight: bold; font-size: 18px;">Text 1</a></div></div>
    <div class="results"><div class="ytube"><a  style="font-weight: bold; font-size: 18px;">1247589</a></div></div>

</div>
</section>

</body>
</html>

Upvotes: 1

Mr. Sulaman Khan

Reputation: 475

You can search in div by using filter function.

  jQuery("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    jQuery("#myDIV *").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>
<input id="myInput" type="text" placeholder="Search..">

<div id="myDIV">
  <p>I am a paragraph.</p>
  <div>I am a div element inside div.</div>
  <button>I am a button</button>
  <button>Another button</button>
  <p>Another paragraph.</p>
</div>

de here

Upvotes: 11

Itay Ganor

Reputation: 4205

In your script, you hide and show All the #results div and not the specific one in the each loop. So change the selector to this.

Plus, you forgot to include jQuery in the fiddle.

    $("#filter").keyup(function() {

      // Retrieve the input field text and reset the count to zero
      var filter = $(this).val(),
        count = 0;

      // Loop through the comment list
      $('#results div').each(function() {


        // If the list item does not contain the text phrase fade it out
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
          $(this).hide();  // MY CHANGE

          // Show the list item if the phrase matches and increase the count by 1
        } else {
          $(this).show(); // MY CHANGE
          count++;
        }

      });

    });

.header {
  display: flex;
}

.header p {
  flex: 1;
  font-weight: bold;
}

.results {
  display: flex;
}

.results p {
  flex: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="filter" type="text">

<div id="header">
  <div class="header">
    <p>ID</p>
    <p>Manufacturer</p>
    <p>Type</p>
    <p>PS</p>
  </div>
</div>

<div id="results">
  <div class="results">
    <p>1</p>
    <p>Toyota</p>
    <p>C 200</p>
    <p>114</p>
  </div>
  <div class="results">
    <p>2</p>
    <p>Mercedes</p>
    <p>C 220</p>
    <p>144</p>
  </div>
</div>

JSFiddle

Upvotes: 31

Live search on an Div with input filter

Answers (5)

Complete filter with feedback

Related Questions