我如何使用 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);

    });

});