Autosuggestions list mock

by IllusionMH

HTML

<input type="text" id="inp" />
<ul id="suggests">
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
    <li>test4</li>
    <li>test5</li>
    <li>test6</li>
    <li>test7</li>
    <li>test8</li>
    <li>test9</li>
    <li>test10</li>
</ul>

CSS

li.active {
    background: red;
}

JavaScript

var $inp = $('#inp');
var $suggests =$('#suggests');
var actions = {
    //Arrow up
    38: function() {
        var $act = $suggests.find('.active');
        if(1 > $act.length) {
            $act = $suggests.find('li:last');
        } else if($act.prev().length) {
            $act = $act.prev();
        }
        $suggests.find('.active').removeClass('active');
        $act.addClass('active');
        $inp.val($act.text());
    },
    //Arrow down
    40: function() {
        var $act = $suggests.find('.active').removeClass('active');
        if(1 > $act.length) {
            $act = $suggests.find('li').eq(0);
        } else if(($next = $act.next()).length) {
            $act = $next;
        }
        $act.addClass('active');
        $inp.val($act.text());
    },
    //Enter key
    13: function() {
        alert($inp.val());
    },
    //Esc key
  //  38: function() {},
};
$inp.on('keyup', function(e) {
    var code = e.keyCode || e.which;
    if(actions[code]) {
        actions[code]();
        //$(this).val(code);
    }
});
$inp.on('keydown', function(e) {
    var code = e.keyCode || e.which;
    if(actions[code]) {
        e.preventDefault();
    }
});