jQuery Twitter bootstrap typeahead 自定义按键输入功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18710325/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap typeahead custom keypress ENTER function
提问by Colin McDonnell
I'm working with Twitter bootstrap on a Django site I'm making. I have a page where users can enter all of their technical skills in a text input equipped with a bootstrap typeahead. I'm trying to access the text within the currently selected within the dropdown menu, such that when ENTER is pressed and an element is highlighted in the dropdown, it takes that value and displays it below the input text field. Then the input text field is cleared and the user can search for another skill.
我正在我正在制作的 Django 网站上使用 Twitter 引导程序。我有一个页面，用户可以在其中输入他们所有的技术技能，并在配备引导输入法的文本输入中输入。我正在尝试访问下拉菜单中当前选定的文本，这样当按下 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;
}
});
If the dropdown is visible, then the enter keypress function takes the currently active element of the dropdown and pastes it into the text box (built in to Bootstrap). No alert box shows. Any idea how I can get my function to trigger before that happens, ie before Bootstrap's function kicks in?
如果下拉列表可见，则 enter keypress 函数将获取下拉列表的当前活动元素并将其粘贴到文本框（内置于 Bootstrap）中。没有警告框显示。知道如何在此之前触发我的函数，即在 Bootstrap 的函数启动之前吗？
回答by Sinetheta
Instead of listening for a keypress (what if the user makes a selection with their mouse?), we can take advantage of the custom eventsTwitter's Typeahead emits. Namely,
我们可以利用Twitter 的 Typeahead 发出的自定义事件，而不是监听按键（如果用户用鼠标进行选择会怎样？）。即，
typeahead:selected– Triggered when a suggestion from the dropdown menu is explicitly selected.
typeahead:selected– 当明确选择下拉菜单中的建议时触发。
Capturing the selection
捕获选择
You can listen for it using jQuery's .on()method, and you will be provided with information about the user's selection in the second argument.
您可以使用 jQuery 的.on()方法侦听它，并且您将在第二个参数中获得有关用户选择的信息。
$('input.typeahead').on('typeahead:selected', function(event, selection) {
alert(selection.value);
});
Clearing the input field
清除输入字段
From there you can do as you like with the selection.value. The only "gotcha" would be trying to clear the input using .val(). Since Typeahead does quite a bit of fancy DOM rewriting, you'll need to use their 'setQuery' method as well.
从那里你可以随心所欲地使用selection.value. 唯一的“问题”是尝试使用.val(). 由于 Typeahead 做了很多花哨的 DOM 重写，您还需要使用他们的“setQuery”方法。
$('input.typeahead').typeahead('setQuery', '');
回答by JeppePepp
Yo can attach the listener on your typeahead code like below;
您可以将侦听器附加到您的预输入代码上，如下所示；
$('#input').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'some name',
displayKey: 'value',
source: data.ttAdapter(),
}).on('keyup', this, function (event) {
if (event.keyCode == 13) {
$('#input').typeahead('close');
}
});
回答by Emiliooo
$(document).keyup(function(event) {
if (event.keyCode == 13) {
$('#yourtextbox').val("");
$('#yourtextbox').typeahead('close');
}
});
you can find the documentation of typeahead here https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md
你可以在这里找到 typeahead 的文档https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md
