2021年11月2日(火)

VanillaなJavaScriptでページ内検索

• 0
• 0
• 3
• 7

Result

See the Pen
Demo In-Page filtered Search by kachibito (@kachibito)
on CodePen.

よくあるページ内インクリメンタル検索です。

jQueryを使うコードしか書いてなかったのでVanillaのコードを改めて備忘録として。

JavaScript

let cards = document.querySelectorAll('.box') function liveSearch() { let search_query = document.getElementById("searchbox").value; //すべてのコンテンツが表示されている場合は innerText を使用。 //隠し要素を含む場合はtextContentを使用。 for (var i = 0; i < cards.length; i++) { if(cards[i].textContent.toLowerCase() .includes(search_query.toL...