вот js
document.querySelector('#elastic').oninput = function (){
let val = this.value.trim();
let block = document.querySelector('.block')
let elasticItem = document.querySelectorAll('.elastic > * ')
if(val !== ''){
for (const elem of elasticItem) {
if(elem.innerText.search(val) === -1){
block.classList.remove('active')
}else{
elem.classList.remove('hide')
let str = elem.innerText;
elem.innerHTML = insertMark(str,elem.innerText.search(val),val.length)
if(elem.innerText.length >=1){
block.classList.add('active')
block.innerHTML = elem.innerHTML
}
}
}
}
else{
for (let elem of elasticItem) {
elem.classList.remove('hide')
elem.innerHTML = elem.innerText;
block.classList.remove('active')
}
}
}
function insertMark(string,pos,len){
return string.slice(0,pos)+ `<mark>`+string.slice(pos, pos+len)+`</mark>`+string.slice(pos +len)
}
вот pug
div
input(id='elastic')
ul.elastic
a Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet, aperiam corporis cumque deserunt esse facilis illum impedit minus mollitia nam necessitatibus officiis praesentium quos sit. Ad consequuntur delectus nihil nisi omnis, reiciendis sequi ullam. Dolorem eaque fugit minus molestiae nostrum quos soluta voluptate. Ad, at blanditiis debitis explicabo maiores minima necessitatibus officia quos recusandae reiciendis repellendus sit totam! Accusamus aliquam aliquid animi at atque consectetur consequuntur distinctio excepturi expedita atum. Cumque harum maxime obcaecati quis.
div
.block
поиск работает отлично но отмечает только первый элемент а не все, если не понятно то пишем в input 'e'
он находит первое совпадение и завершает работу а надо чтобы он весь текст проверил и вывел похожие
