Пытаюсь реализовать живой поиск. При вводе букв в input необходимо отобразить блок div, исходя из набранного текста. Проблема в том, что, вместо отображения целого блока, скрипт режет его кусками.
<input type=search data-search id="search" autocomplete="off">
<div class="item angled-bg" id="charItem" data-searchable>
<!-- <div> остальные элементы</div> -->
</div>
<script type="text/javascript">
document.querySelector('[data-search]').addEventListener('keyup',filter)
function filter(){
var term = document.querySelector('[data-search]').value
var tag = document.querySelectorAll('[data-searchable] div')
for (i=0;i<tag.length;i++){
if (tag[i].innerHTML.indexOf(term) !== -1){
tag[i].style.display = 'block'
} else {
tag[i].style.display = 'none'
}
}
}
</script>
Подскажите, пожалуйста, как это решить?