Question

我在我正在制作的Django网站上使用Twitter引导程序。我有一个页面，用户可以在配有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;
    }
  });

如果下拉列表可见，则输入按键功能将获取下拉列表的当前活动元素并将其粘贴到文本框中（内置于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', '');

Answer 2

Yo可以将监听器附加到您的预先输入代码上，如下所示;

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

您可以在https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md

找到typeahead的文档

Twitter bootstrap typeahead自定义按键ENTER功能

3 个答案:

捕获选择

清除输入字段