Javascript search search through all list not working

Question

我为我的网站做了一些搜索功能。我已经成功完成了关键字搜索。现在，我正在尝试从列表中搜索标题。我已经尝试了一些谷歌，但他们都没有为我工作。

我的搜索应该与关键字和任何数据属性一起使用。示例：当我搜索Apple时，结果应该显示数字1和Apple。如果我搜索1，结果应显示1并添加苹果。

这里是我的搜索功能：

function myFunction() { 
 
    var input, filter, ul, li, a, i; 
 

 
    input = document.getElementById("mySearch"); 
 
    title = document.querySelectorAll("[title=" + CSS.escape(input) + "]"); 
 
    filter = input.value.toUpperCase(); 
 
    ul = document.getElementById("result"); 
 
    li = ul.getElementsByTagName("li"); 
 

 
    for (i = 0; i < li.length; i++) { 
 
     a = li[i]; 
 
     if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { 
 
      li[i].style.display = ""; 
 
     } else { 
 
      li[i].style.display = "none"; 
 
     } 
 
    } 
 
}

<section id="result"> 
 
<div class="search"> 
 
    <input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.."> 
 
    <label><input type="checkbox" id="myCase" ">Case Sensitive</label> 
 
</div> 
 

 
<ul> 
 
    <li> 
 
     <div>Search 1</div> 
 
     <ul> 
 
      <li title="Apple">1</li> 
 
      <li title="Ball">2</li> 
 
      <li title="Cat">3</li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <div>Search 2</div> 
 
     <ul> 
 
      <li title="Eagle">4</li> 
 
      <li title="Ferry">5</li> 
 
      <li title="Glue">36</li> 
 
     </ul> 
 
    </li> 
 
</ul>

Answer 1

也许只是检查标题：

var filter = "CAT"; 
document.querySelectorAll("ul > li") 
.forEach(function(el){ 
    el.style.display = 
    el.attributes.title.toUpperCase().includes(filter) 
    ?"block" 
    :"none"; 
});