JSFiddle - React, Tailwind, and code Playground

by Alexis López Espinoza

HTML

<label for = "search">Choose your lunch name of below list:</label>
<input type = "text" id = "search" placeholder = "Your choice" autofocus />
<section>
    <div>
        <img src = "http://images.media-allrecipes.com/userphotos/960x960/3757193.jpg" />
        <span>Lentils with rice</span>
    </div>
    <div>
        <img src = "http://www.todohuertoyjardin.es/blog/wp-content/uploads/2014/02/cultivo-espinacas-huerto.jpg" />
        <span>Spinach salad</span>
    </div>
    <div>
        <img src = "http://blogs.20minutos.es/yaestaellistoquetodolosabe/files/2012/07/Por-qu%C3%A9-se-llama-macedonia-al-postre-compuesto-de-varias-frutas.jpg" />
        <span>Fruits salad</span>
    </div>
    <div>
        <img src = "http://www.regmurcia.com/servlet/integra.servlets.Imagenes?METHOD=VERIMAGEN_95203&nombre=plato-presentado_res_300.jpg" />
        <span>Wheat stew</span>
    </div>
    <div>
        <img src = "http://file.answcdn.com/answ-cld/image/upload/w_768,h_298,c_fill,g_face:center,q_60,f_jpg/v1/tk/view/getty/soups-and-stews/c75b9a7f/158794010.jpg" />
        <span>Stew with tomatoes</span>
    </div>
</section>

CSS

input, section{
    width: 25em;
}

section{
    border: .1em lightgray solid;
    margin: 1em 3.5em;
}

div{
    border-bottom: .1em lightgray solid;
    height: 5em;
    cursor: pointer;
}

div:hover{
    background: whitesmoke;
}

div:last-child{
    border: 0;
}

div span{
    position: absolute;
    margin: 1.75em 0 0 1em;
    color: darkblue;
    font-family: Verdana;
}

img{
    width: 7em;
    height: 5em;
}

JavaScript

/**
 * @author: Alexis López Espinoza
 */

var search = document.getElementById("search"),
    food = document.getElementsByTagName("span"),
    forEach = Array.prototype.forEach;

search.addEventListener("keyup", function(e){
    var choice = this.value;
  
    forEach.call(food, function(f){
        if (f.innerHTML.toLowerCase().search(choice.toLowerCase()) == -1)
            f.parentNode.style.display = "none";        
        else
            f.parentNode.style.display = "block";        
    });
}, false);