javascript - Twitter bootstrap typeahead 自定义按键 ENTER 功能

Question

我在我正在制作的 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 的函数启动之前吗？

Answer 1

Demo

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