在输入字段上敲了一个简单的建议框..除了我似乎无法解决的两个问题外,所有工作都应该如此:
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();
});