如何根据输入框内容筛选展示匹配的emoji符号对应div元素

问题原因 #

• 选择器范围错误：$(".symbolsparent *")会选中符号容器下所有后代元素（包括每个符号卡片内部的div、span标签），筛选时会单独控制这些子元素的显隐，直接打乱了父级符号卡片的显隐逻辑
• filter方法用法错误：filter的回调函数需要返回布尔值来筛选符合条件的元素，你直接在回调内执行toggle，不符合该方法的使用规范

修正后的JS代码 #

$("#myInput").on("keyup", function () {
    var value = $(this).val().toLowerCase();
    // 直接选中所有符号卡片元素进行筛选
    $(".symbolsparent .symbols").each(function () {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
});

注意：如果页面还未引入jQuery库，需要在上述JS代码执行前先引入jQuery，否则代码不会生效。

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