如何通过筛选元素title属性，实现表情搜索匹配行展示并隐藏其余内容

原代码存在3处问题导致无法生效：

1. 大小写不匹配：仅将输入内容转为小写，未同步转换待匹配的title属性值，大小写不一致时会搜索失败
2. 调用方法报错：标题所在li没有title属性，取到的值为undefined，调用includes方法会抛出JS异常，阻塞后续逻辑执行
3. 逻辑缺失：未实现分类标题联动显示，没有处理「分类下存在匹配表情时需要同步展示对应标题」的规则

修正后JS代码 #

无需修改现有CSS和HTML，直接替换原有JS代码即可生效：

$("#myInput").on("keyup", function () {
    var value = $(this).val().toLowerCase().trim();
    var allLi = $("#ulmain li");
    // 输入为空时恢复全部显示
    if (!value) {
        allLi.show();
        return;
    }
    allLi.hide();
    // 筛选所有匹配的表情行
    var matchLi = $(".abc").filter(function () {
        var title = $(this).attr("title") || "";
        return title.toLowerCase().includes(value);
    }).closest("li");
    matchLi.show();
    // 同步显示匹配表情所属的分类标题
    matchLi.each(function () {
        $(this).prevAll("li:has(.abch2):first").show();
    });
});

实现效果：输入表情关键词后，仅展示匹配的表情行以及对应分类的标题行，其余内容全部隐藏；清空输入框后恢复所有内容的显示。

内容的提问来源于stack exchange，提问作者Avanish Paswan