Bootstrap 输入下拉菜单，更改激活行为 [英] Bootstrap input dropdown, change activation behavior

问题描述

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

这是模板:

<input class="entryInput" id="query" name="query" type="text"数据切换=下拉"/><ul class="dropdown-menu" role="menu" aria-labelledby="query">{{#每个查询结果}}<li><a class="result" data-id="{{_id}}">{{firstname}}</a></li>{{/每个}}

此代码有效，列表显示在下拉列表中，但在第一次单击输入时显示一个空存根(请参阅我的屏幕截图以查看该空存根的外观)，并在我开始键入时消失.

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

• 输入有焦点；
• query 是有效的(所以没有显示一个蹩脚的存根)；
• 和 queryPopulated 为假(因为没有更多的理由显示，用户选择了一个结果).

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

如何覆盖行为?

这是那个蹩脚的存根的样子.

提前致谢！

更新

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

Template.entryStudentInput.rendered = function() {$('.dropdown').on('shown.bs.dropdown', function(){console.log('show');if(!Session.get('query')) {console.log('查询为假');$('.dropdown').dropdown('toggle');}});};

上面的块成功地阻止了下拉列表在空时显示，但是一旦查询有效，我就无法再次显示下拉列表.

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

Template.entryStudentInput.events({'keyup #query':函数(e，t){console.log('应该切换');$('dropdown').dropdown('toggle');//这些也不起作用.//$(t.find('.dropdown')).dropdown('toggle');//t.find('.dropdown').dropdown('toggle');}});

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

解决方案

我发现完全放弃下拉框更简洁.它不符合我的需要.相反，我刚刚创建了一个 list-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"}}禁用{{/unless}}><span class="glyphicon glyphicon-remove"></span>
<div class="list-group" {{#unless queryShow}}hidden{{/unless}}>{{#每个查询结果}}<a href="#" class="result list-group-item" data-id="{{_id}}">{{firstname}} {{lastname}}</a>{{别的}}<a href="#" class="list-group-item">该搜索没有结果.</a>{{/每个}}

queryShow 助手实现如下:

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

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

I'm trying to implement a dropdown box to show search options, much the way the Stack Overflow tag search box works. The search itself is working great, but I can't get the box to show up at the right times.

Here's the template:

<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>

This code works, and the list displays in the dropdown, but it displays an empty stub when the input is first clicked (see my screencap to see what that empty stub looks like), and disappears when I begin typing.

Elsewhere in my app, I manage Session.get('query') and Session.get('queryPopulated'), which are the values I want this dropdown to react to. query is simply storing the query itself in real-time, and queryPopulated is a boolean that is set when the user chooses a result. I want the dropdown to stay active as long as these things are true:

• the input has focus;
• the query is valid (so no showing a lame stub);
• and queryPopulated is false (because there's no more reason to display, the user chose a result).

The Bootstrap docs only provide a toggle method, and that just isn't really fine-grained enough. I need to manually take control of the dropdown's reactions, and I'm not sure how to do that with the events and methods it's exposed.

How do I override the behavior?

Here's what that lame stub looks like.

Thanks in advance!

Update

I now have this javascript managing the dropdown:

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

That block above successfully prevents the dropdown from showing when empty, but I can't get the dropdown to show again once the query is valid.

Here's another block, meant only as an experiment, reacting to key events:

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

It should simply toggle back and forth every time a key is pressed, but it doesn't do anything at all. The console log shows up just like it should, but there's no change whatsoever on the dropdown. It seems like I just have no control over the dropdown from anywhere but the $('.dropdown').on event handlers.

解决方案

I found it was cleaner to abandon the dropdown box entirely. It didn't fit my needs. I instead have just created a list-group that appears/reappears as the query changes.

<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>

The queryShow helper is implemented like this:

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

This works great, although it does push content it downwards. I personally don't care.

这篇关于Bootstrap 输入下拉菜单，更改激活行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！