https://jsfiddle.net/lh9eflxm/

Mam problemy z skryptem wyszukiwania na żywo.

Mam trochę div jako "rzędy" i niektóre p , jak "kolumny"

Pole wejściowe jako #filter powinien ukryć wszystkie "wiersze" (div) bez znaczenia

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

Ale wydaje mi się, że niektórzy niektórzy tęsknią.

Czy ktoś może mi pomóc? thx

7
Korty 24 czerwiec 2017, 14:46

4 odpowiedzi

Najlepsza odpowiedź

W skrypcie ukrywa się i pokazujesz wszystkie #results div, a nie specyficznego pętli each. Zmień więc selektor do this.

Plus zapomniałeś dołączyć jQuery na skrzypce.

    $("#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

16
Itay Ganor 24 czerwiec 2017, 11:59

Wypełnij filtr z informacjami zwrotnymi

Kredyty z

$('.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>
0
Felipe Genuino 18 sierpień 2020, 07:26

Dziękuję Ci bardzo! Bardzo mi pomogło. Mam ten kod:

<!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>
0
Федор Мойсеенок 1 luty 2019, 20:13

Możesz wyszukiwać w Div za pomocą funkcji Filter.

  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 tutaj

4
symi khan 31 styczeń 2019, 13:33