Question

我有一个列表，我尝试过滤，然后删除过滤后的结果。我在w3schools找到了一个现成的过滤解决方案，但我在删除线路方面遇到了麻烦。

我的HTML在这里：

<body>
    <ul id="project-list">
        <li><a href="#">Please please me</a></li>
        <li><a href="#">With the Beatles</a></li>
        <li><a href="#">A Hard Day's Night</a></li>
        <li><a href="#">Beatles for Sale</a></li>
        <li><a href="#">Help!</a></li>
        <li><a href="#">Rubber Soul</a></li>
        <li><a href="#">Revolver</a></li>
        <li><a href="#">Sgt. Pepper's Lonely Hearts Club Band</a></li>
        <li><a href="#">The Beatles (The White Album)</a></li>
        <li><a href="#">Yellow Submarine</a></li>
        <li><a href="#">Abbey Road</a></li>
        <li><a href="#">Let It Be</a></li>
    </ul>

    <div data-role="footer" class="ui-grid-a" data-position="fixed">

        <div id="myNavbar" data-role="navbar" class="navbar">
            <div class="ui-block-a" style="width:auto">
                <button id="remove" onclick="listDelete">Remove</button>
            </div>

            <script>
            $("button").click(function () {
                $("li").remove(":contains('Beatles')");
            });
            </script>

            <div class="ui-block-b" style="width:70%">
                <input type="text" id="search-input" onkeyup="listFilter()" placeholder="Filter list...">
            </div>
        </div>
    </div><!--/footer-->

过滤功能就是这个

function listFilter() {
// Declare variables
var input, filter, ul, li, a, i;
input = document.getElementById('search-input');
filter = input.value.toUpperCase();
ul = document.getElementById("project-list");
li = ul.getElementsByTagName('li');

for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = "";
    } else {
        li[i].style.display = "none";
    }
}
}

上面的代码使按钮删除包含单词＆＃34; Beatles＆＃34;的每一行。我试图删除包含 search-input 内容的行，最好不区分大小写（就像过滤一样）。理想情况下，当过滤器文本框为空时，我希望这不起作用，以便意外点击删除按钮不会删除整个列表。

我使用 jquery-2.1.1 和 jqm-1.4.4

Answer 1

基于diabolic's answer和生命之路icontains expression，非案例敏感的方法如下：

在标题中将以下两个加载到一个或两个单独的文件中：

function listDelete(){
    $("button").click(function () {
        var input = $("#search-input").val();
            if (input) $("li").remove(":icontains('" +input+ "')");
    });
}

// non-case sensitive contains expression
jQuery.expr[':'].icontains = function(a, i, m) {
    return jQuery(a).text().toUpperCase()
    .indexOf(m[3].toUpperCase()) >= 0;
};

然后你的按钮应该是这样的：

<button id="remove" onclick="listDelete()">Remove</button>

Answer 2

希望这对你有用。将click事件更改为此。它仍然区分大小写：

        $("button").click(function () {
            var fltr = $("#search-input").val();
            if (fltr)
                $("li").remove(":contains('" + fltr+ "')");
        });

如何过滤列表，然后使用javascript从中删除结果

2 个答案: