使用 JavaScript 在 HTML 中搜索功能 [关闭]

Question

我曾尝试使用 Javascript 创建搜索功能，但它不起作用。

function contains(text_one, text_two) {
    if (text_one.indexof(text_two) != -1)
        return true;
}

$("#searchText").onkeyup(function(){
    var searchText = $("searchText").val().toLowerCase()
    $("ul li").each(function() {
        if (!contains($(this).text().toLowerCase(), searchText))
            $(this).hide();
        else
            $(this).show();
    });
});

Answer 1

您可以使用开发者控制台自行调试所有这些问题。如果您在浏览器中按 F12，您将能够看到您的 JS 代码引发的所有错误并解决它们。

从上面我可以看出你的代码有几个问题：

• 你应该使用indexOf，而不是indexof，因为JS是区分大小写的
• $('searchText') 选择器缺少 id 前缀：$('#searchText')
• jQuery 没有onkeyup 方法，只有keyup。

还请注意，您可以通过使用toggle() 并在contains() 函数中仅返回indexOf 比较的结果来改进逻辑。试试这个：

function contains(text_one, text_two) {
    return text_one.toLowerCase().indexOf(text_two.toLowerCase()) != -1;
}

$("#searchText").keyup(function(){
    var searchText = $(this).val();
    $("ul li").each(function() {
        $(this).toggle(contains($(this).text(), searchText));
    });
});

Example fiddle