Question

所以我正在尝试在页面上实现基本搜索功能。我有一个由多个<div>构成的页面和一个搜索栏<input>，如下所示：

<input id="search" type="text">

<div class="panel-flex">
    <h4>Title One</h4>
</div>
<div class="panel-flex">
    <h4>Title Two</h4>
</div>
<div class="panel-flex">
    <h4>Title Three</h4>
</div>

当您在搜索栏中输入内容时，将不会从页面中删除任何不包含当前值的<h4>。到目前为止，这是我的代码，但我找不到让部分搜索匹配发生的方法，只是完全匹配。

例如，如果您搜索了t，则会显示所有内容，但如果您搜索th，则只会显示Title Three。

$(document).ready(function() {
    $("#search").on("keyup", function() {
        var searchTerm = $(this).val();
        $(".panel-flex").each(function() {
            $(this).hide();
            if ($(this).find("h4").text() == searchTerm) {
                $(this).show();
            }
        });
    });
});

我想要一些像PHP的strpos()函数一样的东西，所有的调查都让我得到了JavaScript函数indexOf()，但是试图在我的代码中实现它会使它更加突破。

$(document).ready(function() {
    $("#search").on("keyup", function() {
        var searchTerm = $(this).val();
        $(".panel-flex").each(function() {
            $(this).hide();
            if ($(this).find("h4").indexOf(searchTerm) != -1) {
                $(this).show();
            }
        });
    });
});

Answer 1

您可以使用.filter();

执行此操作

＆＃13;

$(document).ready(function() {
    $("#search").on("keyup", function() {
        $('.panel-flex').hide();
        var searchTerm = $(this).val().toLowerCase();
         $('.panel-flex').filter(function(){
              return  $(this).find("h4").text().toLowerCase().indexOf(searchTerm) > -1;
        }).show();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search" type="text">

<div class="panel-flex">
    <h4>Title One</h4>
</div>
<div class="panel-flex">
    <h4>Title Two</h4>
</div>
<div class="panel-flex">
    <h4>Title Three</h4>
</div>

＆＃13;

Answer 2

考虑区分大小写：

searchTerm = searchTerm.toLowerCase();
$(".panel-flex").each(function() {
    if ($(this).find("h4").text().toLowerCase().indexOf(searchTerm) == -1) {
        $(this).hide();
    } else {
        $(this).show();
    }
});

使用HTML输入值中的部分字符串搜索页面内容

2 个答案: