tipyng array

by marrokin

HTML

<input type="text" class="input-search-home" id ="typed" placeholder="">

CSS

@import url(http://fonts.googleapis.com/css?family=Ubuntu);
*{
    box-sizing:border-box;
    font-family:Ubuntu;
}

.input-search-home{
    padding:7px 14px;
    width: 100%;
    border:1px solid #ccc;
    border-radius:7px;
    font-size: 1.4em;
    color: #aaaaaa;
}

JavaScript

var typingInterval;
var selec;
function typing(identificador, atributo, selec) {
    var bloque = ["Item 1 ...", "Item 2 ...", "Item 3 ...","Item 4 ...","Item 5 ...","Item 7 ..." ];
    $(identificador).attr(atributo, "");
    var max = bloque.length-1;
    var corre = 0;
    var selec = 0;
    
    function myString() {
        var cadena = bloque[selec];
        if ($(identificador).attr(atributo).length != cadena.length) {
            var dato = cadena.substr(corre, 1);
            var placeholder = $(identificador).attr(atributo) + dato;
            $(identificador).attr(atributo, placeholder);
            corre++;
        } else {
            corre = 0
            selec = (selec < max) ? selec + 1: 0;
            $(identificador).attr(atributo, "");
        }
    };
    typingInterval = setInterval(function() {
        myString();
    }, 140);
}
typing("#typed", "placeholder", selec);