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

如果我想要隐藏它，并且在不使用display: none的情况下使项目在视觉上消失，我会更改项目的类名称：

var value = document.getElementById("search").value.toLowerCase();
if (value && current.indexOf(value) != -1) {
    listitems[i].className = "hidden";
} else {
    listitems[i].className = "";
}

CSS

.hidden {
    position: absolute;
    top: -1000px;
    left: -1000px;
}

此外，我还修改了一些代码：在显示/隐藏项目之前，您需要检查搜索字词是否为空。

演示：http://jsfiddle.net/43PcY/2/

Answer 2

http://jsfiddle.net/CYs46/

可见性 + 高度; - ）

从代码中稍微改动一下

    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";
    }

Answer 3

将可见性设置为隐藏，将高度设置为零（仅高度也可以）：

document.getElementById('hideme').style.visibility = 'hidden';
document.getElementById('hideme').style.height = '0px';
document.getElementById('button').onclick = function() {
    document.getElementById('hideme').style.visibility = '';
    document.getElementById('hideme').style.height = '';
};

JSFiddle

编辑：没有jQuery

隐藏列表项而不会丢失订单

3 个答案:

演示：http://jsfiddle.net/43PcY/2/