.js

document.addEventListener('DOMContentLoaded', function () {
    var input = document.querySelector('input');
    input.addEventListener('keyup', function (event) {
        if (event.keyCode == 38 || event.keyCode == 40) {
            var active = document.querySelector('.active');
            if (event.keyCode == 40) {
                if (!active) {
                    document.querySelector('li').className = 'active';
                } else {
                    var nextElement = active.nextSibling;
                    if (nextElement) {
                        nextElement.className = 'active';
                    } else {
                        document.querySelector('li').className = 'active';
                    }
                    active.className = '';
                }
            } else {
                if (!active) {
                    document.querySelector('li').className = 'active';
                } else {
                    var prevElement = active.previousSibling;
                    if (prevElement) {
                        prevElement.className = 'active';
                    } else {
                        var arr = document.querySelectorAll('li');
                        arr[arr.length - 1].className = 'active';
                    }
                    active.className = '';
                }
            }
        } else {
            jsonpRequest(input.value);
        }
    });
});

function jsonpRequest(q) {
    var url = 'https://predictor.yandex.net/suggest.json/complete?lang=ru&q=' +
        q + '&limit=10&callback=jsonpCallback';
    var script = document.createElement('script');
    script.src = url;
    document.body.appendChild(script);

}

function jsonpCallback(json) {
    if (!json || !json.text) {
        return;
    }
    var input = document.querySelector('input');
    var parent = document.querySelector('#results');
    parent.innerHTML = '';
    for (var el in json.text) {
        var li = document.createElement('li');
        li.innerHTML = json.text[el];
        li.addEventListener('click', function (event) {
            input.value = this.innerHTML;
        });
        parent.appendChild(li);
    }
}


/*

var Ajax = {
    _init:function() {
    return this.createXmlHttpRequest();
}, createXmlHttpRequest:function() {
    var b;
    try {
        b = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (c) {
        try {
            b = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (a) {
            b = !1;
        }
    }
    b || "undefined" != typeof XMLHttpRequest && (b = new XMLHttpRequest);
    b || (location.href = (isHttps ? 'https' : 'http') + "://" + App.host + "/badbrowser");
    return b;
}, simple_post:function(b, c) {
    var self = this;
    var a = Ajax._init();
    a && (a.open("POST", b.url, !0),
        a.setRequestHeader("X-Requested-With", "XMLHttpRequest"),
        a.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"),
        a.send(Ajax.dataEncode(b.data)),
        a.onreadystatechange = function() {
            if (4 == a.readyState && 200 == a.status) {
                c.call(self, a.responseText);
            }
        });
}, post:function(b, c) {
    var self = this;
    var a = Ajax._init();
    a && (a.open("POST", b.url, !0),
        a.setRequestHeader("X-Requested-With", "XMLHttpRequest"),
        a.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"),
        a.send(Ajax.dataEncode(b.data)),
        a.onreadystatechange = function() {
            if (4 == a.readyState && 200 == a.status) {
                var b = $.parseJSON(a.responseText);
                c.call(self, b);
            }
        });
}, simple_get:function(b, c) {
    var self = this;
    var a = Ajax._init();
    a && (a.open("GET", b.url + "?" + Ajax.dataEncode(b.data), !0),
        a.setRequestHeader("X-Requested-With", "XMLHttpRequest"),
        a.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"),
        a.send(),
        a.onreadystatechange = function() {
            4 == a.readyState && 200 == a.status && c.call(self, a.responseText);
        });
}, get:function(b, c) {
    var self = this;
    var a = Ajax._init();
    a && (a.open("GET", b.url + "?" + Ajax.dataEncode(b.data), !0),
        a.setRequestHeader("X-Requested-With", "XMLHttpRequest"),
        a.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"),
        a.send(null),
        a.onreadystatechange = function() {
            if (4 == a.readyState && 200 == a.status) {
                var b = $.parseJSON(a.responseText);
                c.call(self, b);
            }
        });
}, dataEncode:function(b) {
    var c = "";
    if (b) {
        for (var a in b) {
            b.hasOwnProperty(a) && (c += "&" + a.toString() + "=" + encodeURIComponent(b[a]));
        }
        if ("&" == c.charAt(0)) {
            return c.substring(1, c.length);
        }
    }
    return c;
}};*/