引导输入下拉菜单，更改激活行为答案

【问题标题】：Bootstrap input dropdown, change activation behavior引导输入下拉菜单，更改激活行为
【发布时间】：2014-03-13 00:56:25
【问题描述】：

我正在尝试实现一个下拉框来显示搜索选项，这与 Stack Overflow 标记搜索框的工作方式非常相似。搜索本身运行良好，但我无法让该框在正确的时间出现。

这是模板：

<div class="dropdown">
    <input class="entryInput" id="query" name="query" type="text"
        data-toggle="dropdown"/>
    <ul class="dropdown-menu" role="menu" aria-labelledby="query">
        {{#each queryResults}}
            <li><a class="result" data-id="{{_id}}">{{firstname}}</a></li>
        {{/each}}
    </ul>
</div>

此代码有效，列表显示在下拉列表中，但在第一次单击输入时会显示一个空存根（请参阅我的屏幕截图以了解该空存根的外观），并在我开始输入时消失。

在我的应用程序的其他地方，我管理 Session.get('query') 和 Session.get('queryPopulated')，这是我希望此下拉菜单做出反应的值。 query 只是实时存储查询本身，queryPopulated 是在用户选择结果时设置的布尔值。只要这些事情属实，我希望下拉菜单保持活跃：

输入有焦点；
query 有效（因此不会显示蹩脚的存根）；
和queryPopulated 是假的（因为没有更多的理由显示，用户选择了一个结果）。

Bootstrap docs 只提供了一个toggle 方法，这还不够细粒度。我需要手动控制下拉菜单的反应，我不确定如何使用它公开的事件和方法来做到这一点。

如何覆盖该行为？

这就是那个蹩脚的存根的样子。

提前致谢！

更新

我现在有这个 javascript 管理下拉列表：

Template.entryStudentInput.rendered = function() {
    $('.dropdown').on('shown.bs.dropdown', function(){
        console.log('show');
        if(!Session.get('query')) {
            console.log('query is false in show');
            $('.dropdown').dropdown('toggle');
        }
    });
};

上面的那个块成功地阻止了下拉菜单在空时显示，但是一旦查询有效，我就无法让下拉菜单再次显示。

这是另一个块，仅作为实验，对关键事件做出反应：

Template.entryStudentInput.events({
    'keyup #query': function(e, t) {
        console.log('should toggle');
        $('dropdown').dropdown('toggle');
        // These didn't work either.
        // $(t.find('.dropdown')).dropdown('toggle');
        // t.find('.dropdown').dropdown('toggle');
    }
});

它应该在每次按下一个键时简单地来回切换，但它根本不做任何事情。 console 日志按原样显示，但下拉菜单没有任何变化。似乎除了$('.dropdown').on 事件处理程序之外，我无法控制任何地方的下拉菜单。

【问题讨论】：

标签： twitter-bootstrap meteor

【解决方案1】：

当你的ul 没有孩子时，你只需要反转它的切换效果。

示例有 2 个下拉菜单，1 个有子级，1 个没有子级。

引导层：http://www.bootply.com/120571

JS：

$('.dropdown').on('shown.bs.dropdown', function(){
    if( $(this).find('.dropdown-menu').children().length == 0)
    {
      $(this).dropdown('toggle');
    }
});

HTML：

<div class="col-md-6">
  <div class="dropdown">
      <input class="entryInput" id="query" name="query" type="text" data-toggle="dropdown">
      <ul class="dropdown-menu" role="menu" aria-labelledby="query">
              <li><a class="result" data-id="{{_id}}">{{firstname}}</a></li>
              <li><a class="result" data-id="{{_id}}">{{firstname}}</a></li>
              <li><a class="result" data-id="{{_id}}">{{firstname}}</a></li>
              <li><a class="result" data-id="{{_id}}">{{firstname}}</a></li>
              <li><a class="result" data-id="{{_id}}">{{firstname}}</a></li>
              <li><a class="result" data-id="{{_id}}">{{firstname}}</a></li>
      </ul>
  </div>
 </div>

更新：

要达到您想要的效果，更好的方法是在没有子级时影响hidden 类，并在您的查询填充它时删除该类。

引导层：http://www.bootply.com/120667

正如您在此示例中看到的 [正在运行 setTimeout 以模拟您实现的查询]，当第一个 ul 没有孩子时，没有附加任何内容，并且当填充此 ul 时，会出现下拉菜单。

JS：

$('.dropdown').on('shown.bs.dropdown', function(e){
    if( $(this).find('.dropdown-menu').children().length == 0)
    {
      $(this).find('.dropdown-menu').addClass('hidden');
    }
});

setTimeout(function(){
   $('.dropdown').first().find('.dropdown-menu').append($('.dropdown').last().find('.dropdown-menu').html());
  $('.dropdown').first().find('.dropdown-menu').removeClass('hidden');
  alert('5s elapsed');
}, 5000);

【讨论】：

这可以防止显示空下拉菜单，但是当查询有效时让它显示自己呢？我即将添加更多信息...
我不想做那么多 jquery，我希望模板保持语义化。不过，我感谢您的帮助！您给了我利用 hidden 属性的想法。

【解决方案2】：

我发现完全放弃下拉框更简洁。它不符合我的需要。相反，我刚刚创建了一个list-group，它会随着查询的变化而出现/重新出现。

<div class="input-group">
    <input class="entryInput form-control" id="query" name="query" type="text"
        {{#if session "queryPopulated"}}readonly{{/if}}/>
    <span class="input-group-btn">
        <button id="cancelQuery" class="btn btn-default" type="button"
        {{#unless session "queryPopulated"}}disabled{{/unless}}>
            <span class="glyphicon glyphicon-remove">
        </button>
    </span>
</div>
<div class="list-group" {{#unless queryShow}}hidden{{/unless}}>
    {{#each queryResults}}
        <a href="#" class="result list-group-item" data-id="{{_id}}">{{firstname}} {{lastname}}</a>
    {{else}}
        <a href="#" class="list-group-item">There are no results for that search.</a>
    {{/each}}
</div>

queryShow 助手是这样实现的：

Template.entryStudentInput.queryShow = function() {
    return Session.get('query') && !Session.get('queryPopulated');
};

这很好用，尽管它确实将内容向下推。我个人不在乎。

【讨论】：