Autocomplete

by someprimetime

HTML

<script src="http://fgnass.github.com/spin.js/dist/spin.min.js"></script>
<div class="js-autocomplete">
    <input type="text" placeholder="search">
    <ul class="js-autocomplete-suggestions">
        <li class="uno"><a href="">One</a>

        </li>
        <li class="dos"><a href="">Two</a>

        </li>
        <li class="tres"><a href="">Three</a>

        </li>
    </ul>
</div>

CSS

.js-autocomplete {
    position: relative;
}
.js-autocomplete-suggestions {
    display: block;
    height: 300px;
    border: 3px solid #ccc;
    padding: 0;
    position: absolute;
    width: 300px;
}
ul > li {
    display: block;
    padding: 10px 0 10px 10px;
    border-bottom: 1px solid #ccc;
}
li:hover {
    background: whiteSmoke;
}
.active {
    background-color: #eee;
}
.loading {
    position: relative;
}
.loader {
    position: absolute;
}

JavaScript

(function ($) {
    // keys
    KEYUP = 38;
    KEYDOWN = 40;
    ESC = 27;

    $.fn.autocomplete = function () {
        var $container = $(this);
        var $input = $container.find('input');
        var $listContainer = $container.find('.js-autocomplete-suggestions');

        $input.focus(function () {
            $listContainer.show();

            $input.keydown(function (evt) {

                var keyPressed = evt.which;
                var $input = $(this);
                    

                if (keyPressed == KEYDOWN) {

                    $listContainer.find('li').each(function (i, el) {

                        var $li = $(el);
                        var $activeNode = $li.hasClass('active');

                        if ($activeNode) {
                            $li.removeClass('active')
                                .next()
                                .addClass('active');
                            $input.val($li.next().text());
                            return false;
                        } else {
                            // need to add the class the first time
                            if (!$listContainer.find('li').hasClass('active')) {
                                $listContainer.find('li').first().addClass('active');
                            }
                        }
                    });
                }
            });
        }).blur(function () {
            //$listContainer.hide();
        });

    };

})(jQuery);

$(function () {
    $('.js-autocomplete').autocomplete();
});