Twitter Bootstrap Typeahead自定义按键ENTER功能

Question

Twitter Bootstrap Typeahead自定义按键ENTER功能

11

我正在制作一个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”键按下函数将获取下拉菜单当前活动的元素，并将其粘贴到文本框中（内置于Bootstrap中）。不会显示任何警报框。您有什么想法，如何在此发生之前触发我的函数，即在Bootstrap的函数开始之前？

- Colin McDonnell

3个回答

11

您可以像下面这样在您的typeahead代码上附加监听器；

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

- JeppePepp

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

- Emiliooo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sinetheta · Accepted Answer

演示

为了避免只监听按键事件（如果用户使用鼠标选择呢？），我们可以利用Twitter's 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', '');