Buscador js puro

by Felipe Zura

HTML

<div class="wrapper">
    <input type="text" class="search" placeholder='Buscador'>
    <div class="output"></div>
</div>

JavaScript

let input = document.querySelector('.search');
let output = document.querySelector('.output');
let data = [
    {
        name: 'Juan Carlos',
        age: 45,
        prof: 'General' 
    },
    {
        name: 'Juan',
        age: 23,
        prof: 'test' 
    },
    {
        name: 'Erick ',
        age: 40,
        prof: 'test'
    },
    {
        name: 'Prueba',
        age: 30,
        prof: 'test'
    },
    {
        name: 'Prueba',
        age: 42,
        prof: 'test'
    },
    {
        name: 'Prueba',
        age: 43,
        prof: 'Hodor'
    },
    {
        name: 'Prueba Prueba',
        age: 35,
        prof: 'test'
    },
    {
        name: 'Prueba',
        age: 22,
        prof: 'test'
    }
];

function isMatch(value, regExp){
    value += '';
    if(value.match(regExp)){
        return true;
    }else{
        return false;
    }
}
function draw (data, container) {
    if(data.length){
        let outHTML = `<table><thead><td>Nombree</td><td>Edad</td><td>Profesion</td></thead>`;
        data.forEach((value, index)=>{
            outHTML += `<tr class="tran" style="animation-delay: ${index / 30}s">
                                        <td>${value.name}</td> 
                                        <td>${value.age}</td>
                                        <td>${value.prof}</td>
                                    </tr>`;
        });
        container.innerHTML = outHTML + `</table>`;
    }else{
        container.innerHTML = `<h3 class="err tran">No hay :( </h3>`;
    }
}
draw([...data], output);
input.addEventListener('keyup',(e)=>{
    let inputData = e.target.value;
    if (inputData !== ''){
        let reg = new RegExp(inputData, 'gi');
        let outar = [...data].filter((value, index)=>{ 
            return isMatch(value.age, reg) 
                         || 
                         isMatch(value.name, reg)
                         ||
                         isMatch(value.prof, reg)
        });
        draw(outar, output);
 ...