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"; 
});