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

标签 javascript jquery jquery-mobile

我有一个正在尝试过滤的列表,然后删除过滤的结果。我在 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";
    }
}
}

上面的代码使按钮删除包含单词“Beatles”的每一行。我正在尝试删除包含搜索输入内容的行,最好不区分大小写(就像过滤一样)。理想情况下,我希望当过滤器文本框为空时此功能不起作用,这样意外单击删除按钮就不会删除整个列表。

我正在使用jquery-2.1.1jqm-1.4.4

最佳答案

希望这对您有用。将点击事件更改为此。它仍然区分大小写:

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

关于javascript - 如何使用 javascript 过滤列表,然后从中删除结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47446287/

相关文章:

javascript - 隐藏/显示不同的链接

javascript - 单击后更改链接的背景颜色

javascript - 找不到模块 '../build/Release/bson' ] 代码 : 'MODULE_NOT_FOUND' } js-bson: Failed to load c++ bson extension, 使用纯 JS 版本

javascript - JQuery Mobile 自动添加奇怪的加载消息

javascript - 缩放后如何应用 d3.js svg 裁剪

javascript - Node.js (Express API) : req. body.myobject 未定义且无法工作

javascript - 在其中单击时不要隐藏下拉列表

javascript - 尝试使用 jquery 制作 slider

jquery - HTML5 布局,如 Android Tab 和 Swipe 布局

javascript - jQuery Mobile slider 捕捉?