Question

在输入字段上敲了一个简单的建议框..除了我似乎无法解决的两个问题外，所有工作都应该如此：

1）当onkeypress事件触发时，输入框的值不正确 - 它错过了最后一个字符！因此对于例如如果你输入3个字符，只有前两个字符可以通过。所以有时建议并不完全准确！

2）我需要注意用户按下向下箭头键，然后将焦点设置到建议框中的第一个列表项目！似乎无法让这个工作！

已包含代码供您查看！任何建议都欢迎..但是我真的不想使用插件，因为我已经完成了95％..

这是jsfiddle链接！ http://jsfiddle.net/beardedSi/kr4Cq/

注意 - 我只是注意到在小提琴verison中，因为我在代码中放置了虚拟数组，它不再匹配建议 - 但这没关系，它在我的工作代码中工作正常！

    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();
});

自动提示框，设置焦点

0 个答案: