Reactive filter

by jahongirsobirov

HTML

<script src="https://signel.onrender.com/signel.js"></script>
<input type="text" id="filter">
<div id="result">
  <ul id="country">
    $$result
  </ul>
</div>

JavaScript

let countries = ['Argentina', 'USA', 'Uzbekistan']
countries = countries.map(country => `<li>${country}</li>`)
let state = el('#result', {
  result: countries.join(''),
  country: ''
})

model('#filter', state, 'country')
watch(state, 'country', value => {
  state.result = countries.filter(country => country.toLowerCase().includes(value.toLowerCase())).join('')
})