Question

在我们开始之前，我想说我在stackoverflow上经历了一个类似的问题，我使用了答案，代码超出了要搜索的关键字（<li>列表），焦点是也没有去搜索关键字，因此我问了这个问题。

我在html中有一个无序列表。代码

<nav class="float-nav closed">
  <ul id="foo"></ul> 
  <a class="toggle" href="#" style="text-decoration: none;">+</a>
</nav>

我使用javascript填充数据。代码：

var options = [
    set0 = ['Wayne Rooney', 'Frank Lampard', 'Steven Gerrard', 'Harry Kane', 'Theo Walcott', 'James Vardy', 'Raheem Sterling'],
    set1 = ['http://example.com', 'http://example.com',
            'http://example.com', 'http://example.com', 'http://example.com', 'http://example.com', 'http://example.com']];

function makeUL(array) {
    var list = document.createElement('ul');

    for (var i = 0; i < array[0].length; i++) {
        // Create the list item:
        console.log(array.length);
        var item = document.createElement('li');

        var a = document.createElement('a');
        var span = document.createElement('span');
        var linkText = document.createTextNode(array[0][i]);
        span.appendChild(linkText);
        a.target = "_blank";
        a.href = array[1][i];

        a.appendChild(span);
        item.appendChild(a);
        list.appendChild(item);
    }
    return list;
}
document.getElementById('foo').appendChild(makeUL(options));

这是我在我填充的列表中搜索关键字的代码。

var ul_parent = document.getElementById('foo');
var span_elements = ul_parent.getElementsByTagName("span"); 
var a_elements = ul_parent.getElementsByTagName("a");
var search_term = "Frank";
for (var i = 0, len = span_elements.length; i < len; i++) {
    var lName = span_elements[i].innerHTML.replace(/\w+\s(\w+)$/, function (_, $1) {
        return $1;
    });
    if (search_term.toLowerCase() == lName.toLowerCase()) {
        console.log('found match');
        a_elements[i].focus();
        return false;
    } else {
        console.log('not found');
    }
}

在上面的代码中有一个for循环，控件不在其中。以下是我的代码的fiddle。

Answer 1

这对你有用吗？

<html>
<script>
document.addEventListener('DOMContentLoaded', function(){
    document.getElementById("searchbox").oninput = function () {
        var searchterm = document.getElementById("searchbox").value;
        var list_items = document.querySelectorAll("li");
        for (var i = 0; i < list_items.length; i++) {
            var li = list_items[i];
            if (li.textContent.search(searchterm) == -1) {
                li.style.visibility = "hidden";
            } else {
                li.style.visibility = "visible";
            }
        }
    };
});
</script>
<body>
    <input type="text" id="searchbox" placeholder="type here...">
    <ul>
        <li>cat</li>
        <li>dog</li>
        <li>mouse</li>
        <li>tree</li>
    </ul>
</body>
</html>

如何在无序列表中添加快速搜索功能？

1 个答案: