I’m creating a search function on javascript that has normal and fancy text.
The problem is when searching: Fancy text value: π¬πΌπ π‘π²π²π± ππΌ ππ»πΌπ ππ―πΌππ
it does not work.
document.getElementById("search").addEventListener("keyup", function(evt) { [].forEach.call(document.querySelectorAll(".subjects .subject"), function(subject) { if (subject.textContent.indexOf(evt.target.value) === -1) { subject.classList.add("hide"); } else { subject.classList.remove("hide"); } }); }, false);
<input id="search"></input> <div class="subjects"> <div class="subject">soccer</div> <div class="subject">dancing</div> <div class="subject">π¬πΌπ π‘π²π²π± ππΌ ππ»πΌπ ππ―πΌππ </div> </div>
Advertisement
Answer
Normalise the string with compatibility decomposition before searching
const subjects = document.querySelectorAll(".subjects .subject"); const normalisationForm = "NFKC"; document .getElementById("search") .addEventListener("input", ({ target: { value } }) => { subjects.forEach(({ classList, textContent }) => { const normalised = textContent.normalize(normalisationForm).toLowerCase(); classList.toggle("hide", !normalised.includes(value.toLowerCase())); }); });
.hide { text-decoration: line-through; opacity: .6; }
<input id="search" /> <div class="subjects"> <div class="subject">soccer</div> <div class="subject">dancing</div> <div class="subject">π¬πΌπ π‘π²π²π± ππΌ ππ»πΌπ ππ―πΌππ </div> </div>