我在我正在制作的 Django 网站上使用 Twitter bootstrap。我有一个页面,用户可以在其中输入他们所有的技术技能,这些文本输入配备了 bootstrap typeahead。我正在尝试访问下拉菜单中当前选定的文本,这样当按下 ENTER 并在下拉列表中突出显示一个元素时,它会采用该值并将其显示在输入文本字段下方。然后输入文本字段被清除,用户可以搜索另一个技能。
$(document).keyup(function(event) {
if (event.keyCode == 13) {
if ($('.dropdown-menu').css('display') != 'none'){
var newskill = $(".dropdown-menu > li.active").val();
alert('Yay');
}
else{
var newskill = $("#enterbox").val();
alert('Boo');
}
return false;
}
});
如果下拉列表可见,则 enter keypress 函数获取下拉列表的当前事件元素并将其粘贴到文本框中(Bootstrap 内置)。没有警告框显示。知道如何让我的函数在此之前触发,即在 Bootstrap 的函数启动之前吗?
最佳答案
我们可以利用 custom events 而不是监听按键(如果用户用鼠标进行选择怎么办?) Twitter 的 Typeahead 发射。即,
typeahead:selected
– 当明确选择下拉菜单中的建议时触发。
捕获选择
您可以使用 jQuery 的 .on() 来收听它方法,您将在第二个参数中获得有关用户选择的信息。
$('input.typeahead').on('typeahead:selected', function(event, selection) {
alert(selection.value);
});
清空输入框
从那里您可以使用 selection.value
做任何您喜欢的事情。唯一的“难题”是尝试使用 .val()
清除输入。由于 Typeahead 做了很多花哨的 DOM 重写,您还需要使用他们的“setQuery”方法。
$('input.typeahead').typeahead('setQuery', '');
关于javascript - Twitter bootstrap typeahead 自定义按键 ENTER 功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18710325/