Buscador con JS Puro - Educa Sistemas

Breaking

Post Top Ad

Post Top Ad

viernes, 16 de marzo de 2018

Buscador con JS Puro

Buscador con JS Puro




Buenas compañeros, les compartimos este Buscador con JS Puro.


DESCARGA EL CODIGO AQUI :


 clic

CODIGO HTML

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


CODIGO CSS

@import url('https://fonts.googleapis.com/css?family=Lato');
$font: 'Lato', sans-serif;
$color: #aaa;


*{
    box-sizing: border-box;
}
html,body{
    padding: 0;
    margin: 0;
}
body{
    background: $color * 1.47;
}
.wrapper{
    position: absolute;
    padding: 1.5em;
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.search{
    padding: .7em 0.5em .7em;
    width: 100%;
    font-family: $font;
    margin-top: 2em;
    border: 1px solid $color;
    &:focus::placeholder{
        transition: .3s ease;
        letter-spacing: 1.5em;
        color: $color*1.4;
    }
}
.err{
    color: $color * .9;
    font: $font;
    text-align: center;
}
table{
    width: 100%;
    font-family: $font;
    margin-top: 1em;
    thead{
        background: $color;
        color: #fff;
        text-transform: uppercase;
    }
    tr{
        transition: 1.3s ease;
       
    }
    td{
        padding: .5em .5em;
    }
    tr:nth-of-type(2n){
        background: $color * 1.4;
        box-shadow: 1px 1px 2px $color;
    }
    tr.tran,h3.tran{
        animation-duration: 1s;
        animation-name: opac;
        animation-timing-function: ease;
    }
}
@media screen and (max-width: 930px){
    .wrapper{
        width: 100%;
    }
    .search{
        width: 100%;
    }
}
@media screen and (max-width: 500px){
    .wrapper{
        padding: .5em;
    }
    table{
        font-size: .8em;
    }
}
@keyframes opac{
    0%{
        opacity: 0;
        transform: translateX(-20%);
    }
    70%{
        opacity: 1;
        transform: translateX(5%);
    }
    100%{
        transform: translateX(0%);
    }
}




CODIGO JS

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);
    }else{
        draw([...data], output);
    }
});
 



 MAS IMAGENES 




Post Top Ad

Responsive Ads Here