使用JavaScript在HTML中搜索函数

Search function in HTML using JavaScript

本文关键字：搜索 函数 HTML JavaScript 使用      更新时间：2023-09-26

我曾尝试用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();
    });
});

您可以使用开发人员控制台自行调试所有这些问题。如果您在浏览器中按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));
    });
});

小提琴示例

相关文章：