如何将不区分大小写添加到照片库搜索框jquery

How to add case insensitive to photo gallery search box jquery

本文关键字：照片库 搜索 jquery 添加 大小写 不区      更新时间：2023-09-26

伙计们，我是"新手"。我有小任务。我必须为"照片库"创建一个搜索框。我通过在 HTML 列表项中使用"数据关键字"来做到这一点，我也让它响应小写和大写，但问题是我想不区分大小写，但不知道该怎么做。有一些建议与"：contains"选择器一起使用，但要么我无法实现这些建议，要么我完全搞砸了代码。这是代码 https://jsfiddle.net/Lnvaagd3/提前谢谢你:)！

$("#search").keyup(function() {
    var currentQuery = $("#search").val();
    if (currentQuery !== "") {
        $("#list li").fadeOut(100);
        $("#list li").each(function() {
            var currentKeyword = $(this).attr("data-keywords");
            if (currentKeyword.toLowerCase().indexOf(currentQuery) >= 0) {
                $(this).fadeIn(200);
            } else if (currentKeyword.toUpperCase().indexOf(currentQuery) >= 0) {
                $(this).fadeIn(200);
            }
        });
    } else {
        $("#list li").fadeIn(200);
    }
});

尝试使用：

var currentQuery = $("#search").val().toLowerCase();
// ----------------------------------^^^^^^^^^^^^^^

使用它您将不需要else if.

这样，currentQuery和currentKeyword都将是小写字母，换句话说，这一行：

if (currentKeyword.toLowerCase().indexOf(currentQuery) >= 0) {

将不区分大小写。

希望对您有所帮助。

相关文章：