11

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

如果下拉菜单可见，则 enter 按键功能会获取下拉菜单的当前活动元素并将其粘贴到文本框中（内置于 Bootstrap）。不显示警报框。知道如何在此之前触发我的功能，即在 Bootstrap 的功能启动之前？

4

3 回答 3

29

演示

我们可以利用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', '');
于 2013-09-10T04:46:28.273 回答
11

哟可以将侦听器附加到您的预输入代码上，如下所示；

 $('#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');
        }
    });
于 2014-05-10T23:52:22.977 回答
2 
$(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

于 2014-03-05T11:32:57.413 回答