Twitter引导输入自定义按键输入功能

I'm working with Twitter bootstrap on a Django site I'm making. I have a page where users can enter all of their technical skills in a text input equipped with a bootstrap typeahead. I'm trying to access the text within the currently selected within the dropdown menu, such that when ENTER is pressed and an element is highlighted in the dropdown, it takes that value and displays it below the input text field. Then the input text field is cleared and the user can search for another skill.

我正在一个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;
    }
  });

If the dropdown is visible, then the enter keypress function takes the currently active element of the dropdown and pastes it into the text box (built in to Bootstrap). No alert box shows. Any idea how I can get my function to trigger before that happens, ie before Bootstrap's function kicks in?

如果下拉菜单是可见的，那么enter keypress函数将下拉菜单当前活动的元素粘贴到文本框中(内置到Bootstrap中)。没有警告框所示。你知道我如何在启动之前触发我的函数吗?

3 个解决方案

#1

Demo

演示

Instead of listening for a keypress (what if the user makes a selection with their mouse?), we can take advantage of the custom events Twitter's Typeahead emits. Namely,

我们可以利用Twitter的Typeahead发出的自定义事件，而不是监听按键(如果用户用鼠标进行选择呢?)也就是说,

• typeahead:selected – Triggered when a suggestion from the dropdown menu is explicitly selected.
• typeahead:当从下拉菜单中的建议被显式选择时，选择触发。

Capturing the selection

You can listen for it using jQuery's .on() method, and you will be provided with information about the user's selection in the second argument.

您可以使用jQuery的.on()方法侦听它，在第二个参数中将提供关于用户选择的信息。

$('input.typeahead').on('typeahead:selected', function(event, selection) {
  alert(selection.value);
});

Clearing the input field

From there you can do as you like with the selection.value. The only "gotcha" would be trying to clear the input using .val(). Since Typeahead does quite a bit of fancy DOM rewriting, you'll need to use their 'setQuery' method as well.

从那里你可以做你喜欢的选择。value。唯一的“陷阱”是尝试使用.val()清除输入。因为Typeahead做了很多有趣的DOM重写，所以还需要使用它们的“setQuery”方法。

$('input.typeahead').typeahead('setQuery', '');

#2

Yo can attach the listener on your typeahead code like below;

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

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

#3

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

you can find the documentation of typeahead here https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md

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