He hecho un filter/search básico en javascript, de la siguiente manera
searchInp.addEventListener("input", () => {
document.querySelectorAll(".searchSec").forEach(el => {
if (searchInp.value == "") {
el.removeAttribute("style");
} else {
if (el.innerHTML.toLowerCase().search(searchInp.value.toLowerCase()) == -1) {
el.style.display = "none";
}
}
});
});
<h1>Search</h1>
<p><hr/></p>
<p class="searchSec">Java</p>
<p class="searchSec">Python</p>
<p class="searchSec">C</p>
<p class="searchSec">CSharp</p>
<p class="searchSec">PHP</p>
<p class="searchSec">HTML</p>
<p><hr/></p>
<p><input id="searchInp" placeholder="Escribe para buscar" /></p>
Funciona correctamente, el problema, es que quiero resaltar las coincidencias de lo que escribe el usuario con el texto del elemento
(Ejemplo: Valor input = Ja ; Resultado HTML = Java)
Lo he intentado hacer de la siguiente manera, pero sin éxito
searchDocs.addEventListener("input", () => {
if (searchDocs.value.replace(" ", "") == "") {
document.querySelectorAll(".docSection").forEach(el => {
el.innerHTML = el.innerText;
el.removeAttribute("style");
});
} else {
document.querySelectorAll(".docSection").forEach(el => {
if (el.innerText.toLowerCase().search(searchDocs.value.toLowerCase()) == -1) {
el.style.display = "none";
el.innerHTML = el.innerText;
} else {
let inner = el.innerText.split(" ");
let val = searchDocs.value.split(" ");
el.innerHTML = "";
for (let i = 0; i < inner.length; i++) {
if (inner[i].search(val[i]) !== -1) {
inner[i] ="<strong>" + inner[i] + "</strong>";
}
el.innerHTML += inner[i] + " ";
}
}
});
}
});
<h1>Search</h1>
<p><hr/></p>
<p class="docSection">Java</p>
<p class="docSection">Python</p>
<p class="docSection">C</p>
<p class="docSection">CSharp</p>
<p class="docSection">PHP</p>
<p class="docSection">HTML</p>
<p><hr/></p>
<p><input id="searchDocs" placeholder="Escribe para buscar" /></p>