<div class="block">text<li>Test</li></div>
<div class="block">text<li>Lorem</li></div>
<div class="block">text<li>dolor</li></div>
<div class="block">text<li>sit</li></div>

    <input type="text" id="elastic">
    

body{
  margin: 0;
}

.block{
  background: red;
  width: 10%;
  margin: 1% 0.5%;
}

.hide {
    display: none;
}

mark {
    bottom: pink;
}

document.querySelector('#elastic').oninput = function () {
    let val = this.value.trim();
    let elasticItems = document.querySelectorAll('li');
    if (val != '') {
        elasticItems.forEach(function (elem, elem2) {
            if (elem.innerText.search(val) == -1) {
                elem.classList.add('hide');
                elem.innerHTML = elem.innerText;
                elem.parentNode.classList.add('hide');
            }
            else {
                elem.classList.remove('hide');
                elem.parentNode.classList.remove('hide');
                let str = elem.innerText;
                elem.innerHTML = insertMark(str, elem.innerText.search(val), val.length);
            }
        });
    }
    else {
        elasticItems.forEach(function (elem) {
            elem.classList.remove('hide');
            elem.parentNode.classList.remove('hide');
            // $(".show").removeClass('hide');
            elem.innerHTML = elem.innerText;
        });
    }
}

function insertMark(string, pos, len) {
    // hello world
    // hello <mark>wo</mark>rld
    // hello+<mark>+wo+</mark>+rld
    return string.slice(0, pos) + '<mark>' + string.slice(pos, pos + len) + '</mark>' + string.slice(pos + len);
}