JSFiddle - React, Tailwind, and code Playground

by AlexP11223

HTML

Search <input id="search">

<div id="accountsList">
</div>

JavaScript

function showAccounts(accounts) {
  const html = '<ul>' + accounts.map(acc => `<li>${acc.name}</li>`).join('') + '</ul>'
  document.querySelector('#accountsList').innerHTML = html;
}

function search(accounts, searchInput) {
  const filteredAccounts = accounts.filter(acc => acc.name.toLowerCase().includes(searchInput))
  showAccounts(filteredAccounts)
}

const accounts = [
  { name: 'Ivan' },
  { name: 'Ivanka' },
  { name: 'Van Helsing' },
  { name: 'John' },
]

showAccounts(accounts)

const searchBox = document.querySelector('#search')
searchBox.addEventListener('input', () => search(accounts, searchBox.value.toLowerCase()))