JSFiddle - React, Tailwind, and code Playground

by Chank1e

HTML

<input type="text" id="search">
<ul id="results">
  
</ul>

JavaScript

const list = [
    'JavaScript',
    'Kotlin',
    'Rust',
    'PHP',
    'Ruby',
    'Java',
    'MarkDown',
    'Python',
    'C++',
    'Fortran',
    'Assembler'
]

const result = document.getElementById('results')

renderList(list, result)

function filter(val, _list) {
    return _list.filter(it => it.toLowerCase().indexOf(val.toLowerCase()) !== -1)
}

function renderList(_list = [], el = document.body) {
    el.innerHTML = _list.map(item => `<li>${item}</li>`).join('')
}

document.getElementById('search').addEventListener('input', e => {
    console.time('test')
    renderList(filter(e.target.value, list), result)
    console.timeEnd('test')
})