自动提示框,设置焦点

时间:2012-09-26 09:52:16

标签: javascript autocomplete focus search-suggestion

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

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 个答案:

没有答案