Twitter bootstrap typeahead custom keypress ENTER 功能

Posted 2023-02-24

【中文标题】Twitter bootstrap typeahead custom keypress ENTER 功能

【英文标题】：Twitter bootstrap typeahead custom keypress ENTER function

【发布时间】：2013-09-13 15:44:25

【问题描述】：

我正在我正在制作的 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 的函数启动之前？

【参考方案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', '');

【讨论】：

不是同一件事@robin.gomez 这里的问题是“我如何在成功选择后执行操作”，您引用的问题是“我如何让输入键选择第一个建议” .

@Sinetheta：知道如何在不使用 JQuery 的情况下在 Angular 中捕获此事件吗？请您帮忙解决这个问题，因为回车键正在选择突出显示的内容，这是一种非常糟糕的行为。因为回车键会随机选择一个当前突出显示的项目。 --> ***.com/questions/52485555/…

这就是我需要的

【参考方案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

【参考方案3】：

你可以在你的 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');
        
    );