Twitter bootstrap typeahead自定义按键ENTERfunction

我在我正在制作的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; } }); 

如果下拉列表可见，则输入按键function将获取下拉列表的当前活动元素并将其粘贴到文本框中（内置于Bootstrap中）。 没有警报框显示。 知道如何在发生这种情况之前让我的函数触发，即在Bootstrap的函数启动之前？

Answer 1

演示

我们可以利用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', ''); 

Answer 2

哟可以在你的输入代码上附加监听器，如下所示;

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

Answer 3

 $(document).keyup(function(event) { if (event.keyCode == 13) { $('#yourtextbox').val(""); $('#yourtextbox').typeahead('close'); } }); 

你可以在这里找到typeahead的文档https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md