我如何使用jquery的搜索過濾器

Question

我正在嘗試創建一個列表組，以匯總老師所擁有的不同學科的列表。 現在，我想在搜索中搜索主題，但是它不起作用。 我如何使用此代碼實現這一目標？

HTML + PHP代碼：

<div class="container">
    <h2>Filterable List</h2>
    <p>Type something in the input field to search the list for specific items:</p>
    <input class="form-control" id="myInput" type="text" placeholder="Search..">
    <br>
    <ul class="list-group" id="myList">
        <?php foreach ($data as $key => $val) { ?>
                <li class="list-group-item"><a>
                    <?php echo $val['name'] ?></a></li>
        <?php } ?>
    </ul>
</div>

jQuery代碼：

  $(document).ready(function() {
      $("#myInput").on("keyup", function() {
          var value = $(this).val().toLowerCase();
          $("#myList li a").filter(function() {
              $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
          });
      });
  });

提前致謝！

Answer 1

使用以下代碼過濾搜索結果：
我使用了一些示例數據：

  $('#myInput').keyup(function () { var rex = new RegExp($(this).val(), 'i'); $('.list-group .list-group-item').hide(); $('.list-group .list-group-item').filter(function () { return rex.test($(this).text()); }).show(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <h2>Filterable List</h2> <p>Type something in the input field to search the list for specific items:</p> <input class="form-control" id="myInput" type="text" placeholder="Search.."> <br> <ul class="list-group" id="myList"> <li class="list-group-item"><a>jan peters</a></li> <li class="list-group-item"><a>kees peters</a></li> <li class="list-group-item"><a>marcel test</a></li> <li class="list-group-item"><a>john doe</a></li> </ul> </div> 

Answer 2

也許

$(document).ready(function() {
    $("#myInput").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#myList li").filter(function() {
            return $(this).text().toLowerCase.indexOf(value) > -1;
        }).toggle(true);

        $("#myList li").filter(function() {
            return $(this).text().toLowerCase.indexOf(value) < 0;
        }).toggle(false);
    });
});