在DIV搜尋內容

 

程式碼

html

<input type="text" id="search" onkeyup="search()" placeholder="請輸入要搜尋的值">
<div class="content">
    內容123
</div>
<div class="content">
    內容456
</div>
<div class="content">
    內容789
</div>

js

function search() {
    var input    = document.getElementById("Search");
    var filter   = input.value.toLowerCase();
    var contents = document.getElementsByClassName('content');

    for (i = 0; i < contents.length; i++) {
        if (contents[i].innerText.toLowerCase().includes(filter)){
            contents[i].style.display = "block";
        }else{
            contents[i].style.display = "none";
        }
    }
}

結果

相關連結

Search div for text