javascript - 隐藏列表项而不丢失顺序

Question

是否可以隐藏某些<li>的 <ol>不更改每个列表项前面的数字？我正在尝试制作一个只显示 <li> 的搜索功能匹配用户的输入。但是，如果例如第二个 <li>被隐藏它会改变第三个前面的数字<li>到 2，但它应该保持为 3。

如果可能，我正在寻找不使用 jQuery 的答案(尽管原型(prototype)很好)。但是，如果没有 jQuery 就无法完成，那么使用 jQuery 是可以接受的。

HTML:

<label>Search: <input type="text" id="search"/></label> 
<button id="clear">Clear</button>

<div id="list">
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ol>
</div>

Javascript:

window.onload = function(){
    document.getElementById("search").onkeyup = updateList;
    document.getElementById("clear").click = clearInput;
}

function updateList(){
    var list = document.getElementById("list");
    var listitems = list.getElementsByTagName("li");
    for(var i = 0; i < listitems.length; i++) {
        var current = listitems[i].innerHTML.toLowerCase();
        if(current.indexOf(document.getElementById("search").value.toLowerCase()) != -1) {
            listitems[i].style.display = "list-item";
        } else {
            listitems[i].style.display = "none";
        }
    }   
}

function clearInput(){
    document.getElementById("search").value = "";
    updateList();
}

Answer 1

http://jsfiddle.net/CYs46/

visibility + 高度 ;-)

将您的代码作为 fiddle 进行一些改动

    if(current.indexOf(document.getElementById("search").value.toLowerCase()) != -1) {
        listitems[i].style.visibility = "visible";
        listitems[i].style.height = "auto";
    } else {
        listitems[i].style.visibility = "hidden";
        listitems[i].style.height = "0px";
    }