使用 javascript 搜索锚标题属性

Question

我有一个 javascript 搜索功能来搜索链接列表。

function search() {
var input, filter, ul, li, a, i, txtValue, title;
input = document.getElementById("srch");
filter = input.value.toUpperCase();
ul = document.getElementById("sites");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("span")[0];
    txtValue = a.textContent || a.innerText || a.title;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = "";
    } else {
        li[i].style.display = "none";

    }
}

}

和这样的链接列表：

<li><span><a title="hippo" href="https://site1.com" target="_blank">site1.com</a> : Big grey animals</span></li>
<li><span><a title="apple" href="http://site2.com" target="_blank">site2.com</a> : roundish fruit</span></li>
<li><span><a title="couch" href="https://site3.com" target="_blank">site3.com</a> : big soft things to sit on</span></li>
<li><span><a title="lemon" href="https://site4.com" target="_blank">site4.com</a> : sour fruits with two points</span></li>

在大多数情况下，它工作得很好，但没有考虑到 title 属性。因此，如果用户要搜索其中一个关键字，它将不会显示。我尝试了几种变体，但似乎没有任何效果。

Answer 1

要求是在元素包含的文本和元素标题中搜索字符串。

给定代码中的主要问题在这里：

a = li[i].getElementsByTagName("span")[0];
txtValue = a.textContent || a.innerText || a.title;

有几件事。首先，'a' 实际上不是 a 元素，它是第一个跨度（包含 a）。其次，Javascript 将按顺序评估 OR 中给出的值，因此如果第一个为真，则无需继续评估其他值。您没有得到与不同值连接的字符串，您得到的是第一个值（如果存在），如果不存在则为第二个，依此类推。

这里有一个片段纠正了这两个问题，为了说明正在发生的事情，它相当冗长。

function search() {
var input, filter, ul, li, span, a, i, txtValue, title;
input = document.getElementById("srch");
filter = input.value.toUpperCase();
ul = document.getElementById("sites");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
    span = li[i].getElementsByTagName("span")[0];    
    txtValue = span.textContent || span.innerText;
    a = span.firstChild;
    title = a.title;
    if ((txtValue.toUpperCase().indexOf(filter) > -1) || (title.toUpperCase().indexOf(filter) > -1)) {
        li[i].style.display = "";
    } else {
        li[i].style.display = "none";
    }
}
}

<input id="srch"/><button onclick="search()">Search</button>
<ul id="sites">
<li><span><a title="hippo" href="https://site1.com" target="_blank">site1.com</a> : Big grey animals</span></li>
<li><span><a title="apple" href="http://site2.com" target="_blank">site2.com</a> : roundish fruit</span></li>
<li><span><a title="couch" href="https://site3.com" target="_blank">site3.com</a> : big soft things to sit on</span></li>
<li><span><a title="lemon" href="https://site4.com" target="_blank">site4.com</a> : sour fruits with two points</span></li>
</ul>

使用 javascript 搜索锚标题属性

Using javascript to search for anchor title attribute

javascript

anchor

search

attributes

title