使用输入过滤器在Div上实时搜索

Question

https://jsfiddle.net/Lh9efLxm/

我有一些实时搜索脚本的麻烦。

我有一些 div 作为＆＃34;行＆＃34;和一些 p 作为＆＃34;列＆＃34;声明

输入fild为 #filter 应隐藏所有＆＃34;行＆＃34; （div）没有相关性

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

但似乎我有一些想念。

有人可以帮助我吗？ THX

Answer 1

在您的脚本中，隐藏并显示#results div循环中的所有each而不是特定的this。因此，请将选择器更改为 $("#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++; } }); });。

另外，你忘了把jQuery包含在小提琴中。

＆＃13;

＆＃13;

.header {
  display: flex;
}

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

.results {
  display: flex;
}

.results p {
  flex: 1;
}

＆＃13;

<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>

＆＃13;

/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ --user-data-dir=/tmp/foo --unsafely-treat-insecure-origin-as-secure=http://www.your.site

＆＃13;

＆＃13;

＆＃13;

JSFiddle

Answer 2

您可以使用过滤器功能在div中搜索。

  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>

在这里

Answer 3

非常感谢你！这对我帮助很大。我得到以下代码： <！DOCTYPE html> <头> <样式>     输入[类型=文本] {         宽度：100％;         框大小：border-box；         边框：2px实心#ccc;         border-radius：4px;         font-size：16px;         背景颜色：白色；         背景图片：url（'searchicon.png'）;         背景位置：10px 10px；         背景重复：不重复；         填充：12px 20px 12px 40px;     }     .ytube {         宽度：90％;         框大小：border-box；         边框：2px实心#ccc;         border-radius：4px;         font-size：16px;         背景颜色：白色；         背景图片：url（'arrow.png'）;         背景位置：10px 10px；         背景重复：不重复；         填充：12px 20px 12px 40px;     }    <身体>     

    

         

    

    

文本1

    

文本6543

    

文本世界1

    

文本1

    

1247589

Answer 4

带有反馈的完整过滤器

来自@itay-ganor

的积分

我将添加反馈和卡片样式。

$('.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>

Answer 5

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