限制显示Javascript的li元素数量

时间:2016-10-12 16:03:44

标签: javascript html-lists

使用此搜索功能,我如何限制' li'一下子显示到10?还有一种方法可以启用/禁用过滤器,仅显示特定的li元素,例如班级'用户'?

function search() {
        var input, filter, ul, li, a, i;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        ul = document.getElementById("myUL");
        li = ul.getElementsByTagName("li");
        for (i = 0; i < li.length; i++) {
            if (li[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
                li[i].style.display = "";
            } else {
                li[i].style.display = "none";
            }
        }
    }

2 个答案:

答案 0 :(得分:0)

您可以为您的函数添加另一个计数器(我称之为c),每当您找到匹配项时,该计数器最多可计数10。如果它达到10,则不会显示任何结果:

function search() {
    var input, filter, ul, li, a, i, c;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    c = 0;
    for (i = 0; i < li.length; i++) {
        // only show the li, if c isn't 10 yet
        if (li[i].innerHTML.toUpperCase().indexOf(filter) > -1 && c < 10) {
            li[i].style.display = "";
            c++;
        } else {
            li[i].style.display = "none";
        }
    }
}

答案 1 :(得分:0)

猜猜你想一次显示10个项目。你的循环看起来像:

<asp:TextBox ID="txtFirstName" runat="server" TextChanged="txtFirstName_TextChanged"></asp:TextBox>

其中idx可以是全局变量,可用“按下”按钮。您可以在页面重新加载时重置idx。