AutoComplete

by techsin

HTML

<div class="main">
    <div class="b out"></div><div class="b ins">hi</div>
</div>

CSS

.out {
    color:gray;
}

.b {
    position: absolute; top: 0; left: 0; max-width:300px ; word-break: ;
}
.main {
    position: relative;
    width: 300px;
    height: 300px;
    border:solid 1px;
}

JavaScript

var texts=[123,456,789] ,i=texts.length-1,
    out=$('.out'),ins=$('.ins');

insTxt();

function insTxt(){
    out.text(ins.text()+texts[i]);
}
var to, it;
$(window).keypress(function (e){
    add(e.keyCode);
    evaluate(e);
});

function evaluate(e){ 
    var code=e.keyCode;
    if (code==32) out.hide(); else out.show();
    if (code==9) out.hide(); else out.show();
    if (code==8) {
        e.stopPropagation(); e.preventDefault();
        ins.text(ins.text().slice(0,-1));
    }

}

function add(e){
    var t=String.fromCharCode(e);
    ins.text(ins.text()+t);
    insTxt();
}