javascript - 自動提案ボックス、フォーカスの設定

Question

入力フィールドに単純な提案ボックスをノックアップしています..これまでのところ、解決できないように見える2つの問題を除いて、すべて正常に機能しています。

1) onkeypress イベントが発生すると、入力ボックスの値が正しくありません - 最後の文字が抜け落ちています! したがって、たとえば 3 文字を入力すると、最初の 2 文字だけが実行されます。そのため、提案が完全に正確でない場合があります。

2) ユーザーが下矢印キーを押してから、提案ボックスの最初のリスト項目にフォーカスを設定することに注意する必要があります! しかし、これを機能させることはできません！

あなたが見るためのコードが含まれています！どんな提案も歓迎します..しかし、私はこの95％がすでに完了しているので、プラグインを実際に使用したくありません..

これがjsfiddleリンクです！ http://jsfiddle.net/beardedSi/kr4Cq/

注 - コードにダミー配列を配置したため、フィドル バージョンでは候補と一致しなくなっていることに気付きましたが、これは問題ではありません。私の作業コードでは問題なく動作します。

    work = true;
function finish() {
    work = true;
}

var autoComp = $('.autoComp');
var skillInput = $('.new-skills input');


$('.new-skills input').keypress(function (e) {
    var param = $(skillInput).val();
    if (param.length > 0) {
        $.getJSON('/recruiter/home/GetAutocompleteSkills?term=' + param, function (data) {
            $(autoComp).slideDown().empty();
            var items = [];
            $.each(data, function (key, val) {
                items.push('<li><a href="">' + val + '</a></li>');
            });
            $(autoComp).append(items.join(''));
            $('.base-wrapper a').not('.button').click(function (e) {
                work = false;
                e.preventDefault();
                $(skillInput).val($(this).text());
                $(autoComp).empty().slideUp(500, finish);
            });

        });
    }

});

$(skillInput).keydown(function (e) {
    if (e.keyCode == 40) {
        console.log("down");
        $('.autoComp li:first:child').focus();
    }
});
$('.new-skills input').blur(function () {
    if (work == true)
        $(autoComp).slideUp();
});