JS - 根据内部div中的搜索值匹配值隐藏/显示容器div

时间:2018-06-14 00:15:33

标签: javascript php jquery

我正试图隐藏或显示不同的div,因为有人在搜索栏中输入了内容。我已经使用bootstrap来实质上组织通过php循环创建的多行数据。每个“行”数据都是一个,其中有5个“列”,每个列由5个组成。

现在,当我运行代码时,只有“列”内容会显示内部的值是否与搜索栏中的值匹配。我想要的是“行”中的所有内容,以显示是否匹配。关于我缺少的任何想法?

提前致谢!

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

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

  // Loop through the comment list
  $('#searchableRow 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();

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

  });

});
            <input type="text" id="searchInput" name="searchInput">
            <?php
            if (mysqli_num_rows($query) > 0) {
              while($row = mysqli_fetch_assoc($query)) {
            ?>
            <div class="row" id="searchableRow" style="padding-top:10px;">
              <div class="col-4" style="line-height:32px;">
                <?php echo $row["value1"]; ?>
              </div>
              <div class="col-2" style="text-align:right; line-height:32px;">
                $<?php echo $row["value2"]; ?>
              </div>
              <div class="col-2" style="line-height:32px; text-align:right;">
                <?php
                $createTimeStamp = $row["createTimeStamp"];
                $createTimeStamp = new DateTime($createTimeStamp);
                echo $createTimeStamp->format('m/d/y');
                ?>
              </div>
              <div class="col-2" style="line-height:32px; text-align:right;">
                <?php
                $editTimeStamp = $row["editTimeStamp"];
                $editTimeStamp = new DateTime($editTimeStamp);
                echo $editTimeStamp->format('m/d/y');
                ?>
              </div>
              <div class="col-1" style="text-align:right;">
                  <?php echo $row["value3"]; ?>
              </div>
              <div class="col-1" style="text-align:center;">
                  <?php echo $row["value4"]; ?>
              </div>
            </div>
            <?php
              }
            }
            ?>

0 个答案:

没有答案