Question

我正在尝试实现一个下拉框来显示搜索选项，就像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>

此代码有效，列表显示在下拉列表中，但在首次单击输入时显示空存根（请参阅我的screencap以查看空存根看起来像什么），并在我开始输入时消失。

在我的应用程序中，我管理Session.get('query')和Session.get('queryPopulated')，这是我希望此下拉列表作出反应的值。 query只是实时存储查询本身，而queryPopulated是在用户选择结果时设置的布尔值。只要这些事情属实，我希望下拉列表保持活动状态：

输入具有焦点;
query有效（所以没有显示跛脚）;
和queryPopulated为false（因为没有更多理由显示，用户选择了结果）。

Bootstrap docs仅提供toggle方法，而且这种方法确实不够精细。我需要手动控制下拉列表的反应，我不确定如何使用它暴露的事件和方法。

如何覆盖行为？

这就是蹩脚存根的样子。

Here's what that lame stub looks like.

提前致谢！

更新

我现在有这个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事件处理程序之外，我似乎无法控制下拉列表。

Answer 1

您必须在ul没有孩子的情况下反转切换效果。

例如2个下拉菜单，1个和1个没有孩子。

Bootply ：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类，并在你的查询填充它时删除这个类。

Bootply ：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);

Answer 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');
};

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

Bootstrap输入下拉列表，更改激活行为

更新

2 个答案: