Twitter自举键入自定义按键ENTER功能 [英] Twitter bootstrap typeahead custom keypress ENTER function

问题描述

我正在使用我在制作的Django网站上的Twitter bootstrap。我有一个页面，用户可以在配有自举头版的文本输入中输入他们所有的技术技能。我正在尝试访问下拉菜单中当前选定的文本，这样当按下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; 
} 
}）; 
  

如果下拉菜单可见，则输入keypress功能将使用当前活动的下拉菜单和粘贴元素它进入文本框（内置到Bootstrap）。没有提示框显示。任何想法，我可以如何让我的功能触发之前发生，即在Bootstrap的功能开始之前？

解决方案

演示

而不是听按键（如果用户使用鼠标进行选择？），我们可以利用自定义事件

• typeahead：selected - 当下拉菜单中的建议是明确选择

捕获选择

您可以使用jQuery的 .on（）方法，您将获得有关第二个参数中用户选择的信息。

  $（'input.typeahead'）。on（'typeahead：selected'，function（event，selection）{
 alert（selection.value）; 
}）; 
  

清除输入字段

从那里你可以按照你喜欢的 selection.value 来做。唯一的gotcha将尝试使用 .val（）清除输入。由于Typeahead做了很多漂亮的DOM重写，所以你也需要使用'setQuery'方法。

  $ （'input.typeahead'）。typeahead（'setQuery'，''）; 
  

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.

$(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?

解决方案

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,

• typeahead:selected – Triggered when a suggestion from the dropdown menu is explicitly selected.

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.

$('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.

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

这篇关于Twitter自举键入自定义按键ENTER功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！