Array.prototype.tagify = function(tagName) {
    var result = "";

    for (var i = 0; i < this.length; i++) {
        result += ("<" + tagName + ">" + this[i] +
                   "</" + tagName + ">" );
    }
    return result;
}

function QuerySource() {
    var self = this;

    var methods = {
        getSuggestions : function(query, callback) {
            callback([query + " suggestion 1",
                      query + " suggestion 2"]);
        }
    };

    for (name in methods) {
        this[name] = methods[name];
    }
}

var gQs = new QuerySource();

function searchBoxQuery( event ) {
    gQs.getSuggestions(
        event.target.value,
        function(suggestions) {
            var ac = $("#autocomplete-popup");
            ac.html( suggestions.tagify("div") );
            ac.show();
        }
    );
}

$(document).ready( function() {
    $("#search-box").focus();
    $("#search-box").keyup( searchBoxQuery );
    $("#autocomplete-popup").css(
        "width",
        $("#search-box").css("width")
    );
});