JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" class="input-field">
<div>
  <input type="checkbox" class="checkbox" name="car" value="Машина">
  <label for="car">Машина</label>
  
  <input type="checkbox" class="checkbox" name="building" value="Будинок">
  <label for="horns">Будинок</label>
</div>


<ul>
  <li class="item">машина, будинок, вулиця, двір</li>
  <li class="item">машина, робота, офіс, стіл</li>
  <li class="item">телефон, будинок, ноутбук</li>
</ul>

CSS

.hide {
  display: none;
}

JavaScript

const items = [...document.getElementsByClassName('item')];
const checkboxes = [...document.getElementsByClassName('checkbox')];
const field = document.getElementsByClassName('input-field')[0];
let fieldValues = [];

checkboxes.forEach(checkbox => {
	checkbox.addEventListener('click', ({target: {checked, value}}) => { 
  	if (checked) {
     fieldValues.push(value);
    } else {
     const index = fieldValues.indexOf(value);
     if (index > -1) {
     fieldValues.splice(index, 1);
     }
    }
    field.value = fieldValues.join(' ');
    filter();
  }, false);
});

function filter() {
	items.forEach(item => {
  	if (fieldValues.length && !fieldValues.some(word => item.innerText.indexOf(word.toLowerCase()) > -1)) {
    	item.classList.add('hide');
    } else {
      item.classList.remove('hide');
    }
  });
}