var input = $('.studentName');
var hidden = $('.id');
var autocomp = $('.autocomp');

function loadAutocomplete(html) {
    var leftPos = input.position().left + 'px';
    var topPos = (input.position().top + input.outerHeight()) + 'px';
    var width = (input.outerWidth() + 10) + 'px';

    autocomp.css({
        'left': leftPos,
        'top': topPos,
        'width': width
    }).html(html);
}

input.blur(function() {
    setTimeout(function () {
        autocomp.hide();
    }, 200);
});

input.focus(function() {
    if (input.val() != '') {
        autocomp.show();
    }
})

input.keyup(function() {
    var term = input.val();
    if (term == '') {
        autocomp.hide();
    }
    $.get('test.php', {'q': term}, function(data) {
        loadAutocomplete(data);
        autocomp.show();
    });
    return false;
});

function pickItem(id, name) {
    autocomp.hide();
    hidden.val(id);
    input.val(name);
}