java - 过滤/搜索并仅显示图标

Question

我快要疯了，试图只显示搜索框中的图标。

http://www.rsbdylgy.lucusvirtual.es/main.htm(您可以在相同的 html 代码中看到“搜索”脚本)

输入“one”=我需要显示“one”图标

输入“六”= 我需要显示“+”图标

换句话说，我需要从 HTML 应用 2 个过滤器:

title="FILTER1"
<li><a href="#" target="_blank">FILTER2</a></li>

我无法解决这么简单的问题，希望有人能帮助我。

提前谢谢你。

Answer 1

尝试这样的事情:

function checkEntry() {
    var value = $("#myInput").val().toLowerCase();

    $("#content1 a.card").filter(function() {
        if (this.dataset.toggle === "dropdown") {
           // This filters the drop-down links as well, but you may
           //  just want to decide whether or not to show the "+" card
           $(this).parent().find('a:not(.card)').filter(function() {
               $(this).toggle(this.text.toLowerCase().indexOf(value) > -1);
           })
        }
        else {
            $(this).toggle(this.title.toLowerCase().indexOf(value) > -1);
        }
    });
};

作为您的“keyup”事件处理程序。

您使用选择器的方式是选择太多元素并查看这些元素的 text() 函数，但很少有元素具有您想要的值。

我总是发现使用浏览器的嵌入式开发工具很有用，这样您就可以看到正在发生的事情。

您的选择器正在选择所有这些元素:

>$("#content1 *")
w.fn.init(23) [div.numbers, a.card, img, a.card, img, a.card, img, a.card, img, a.card, img, div.dropdown, a.card.dropdown-toggle, img, ul.dropdown-menu, li, a, li, a, li, a, li, a, prevObject: w.fn.init(1)]

只查看您真正想要的其中一个，表明 text() 没有获得您想要的“标题”属性中的信息:

>$($("#content1 *")[1]).text()
""