twitter-bootstrap - Bootstrap 下拉菜单不适用于输入组

Question

我正在尝试创建一个下拉输入以用作搜索框。我希望它的工作方式与 Stack Overflow 标签框类似。您搜索用户，它会弹出建议，您单击其中一个，它会填充该选择并激活一个按钮，然后您可以使用该按钮取消该选择并重新开始该过程。

一切都工作得很好，除了当我在 Bootstrap input group 中添加按钮时，下拉框就停止下拉了。它现在根本不显示。

这是 html:

<div class="row">
    <div class="col-xs-6">

        <div class="dropdown">

            <div class="input-group">
                <input class="entryInput form-control" id="query" name="query" type="text" data-toggle="dropdown" {{#if session "queryPopulated"}}readonly{{/if}}/>
                <span class="input-group-btn">
                    <button id="cancelQuery" class="btn btn-default" type="button"
                    {{#unless session "queryPopulated"}}disabled{{/unless}}>X</button>
                </span>
            </div>

            <ul class="dropdown-menu" role="menu" aria-labelledby="query">
                {{#each queryResults}}
                    <li><a class="result" data-id="{{_id}}">{{firstname}} {{lastname}}</a></li>
                {{/each}}
            </ul>

        </div>
    </div>

    <div class="col-xs-6">
        ...
    </div>
</div>

我可以设置一个选项来将两者重新连接起来吗？这种行为工作得很好(嗯，几乎很好，请查看 my other question 以了解它为什么不完美)，直到我将内容放入输入组中。难道只有我做不到吗？我是不是太贪心了？

提前致谢!

Answer 1

您应该在input-group上设置属性data-toggle，而不是在input上设置属性。

它适用于此 bootply:http://www.bootply.com/120440

代码

<div class="row">
    <div class="col-xs-6">

        <div class="dropdown">
            <div class="input-group" data-toggle="dropdown">
                <input class="entryInput form-control" id="query" name="query" type="text"/>
                <span class="input-group-btn">
                    <button id="cancelQuery" class="btn btn-default" type="button">X</button>
                </span>
            </div>

            <ul class="dropdown-menu" role="menu" aria-labelledby="query">
                    <li><a class="result" data-id="{{_id}}">{{firstname}} {{lastname}}</a></li>
                    <li><a class="result" data-id="{{_id}}">{{firstname}} {{lastname}}</a></li>
                    <li><a class="result" data-id="{{_id}}">{{firstname}} {{lastname}}</a></li>
                    <li><a class="result" data-id="{{_id}}">{{firstname}} {{lastname}}</a></li>
                    <li><a class="result" data-id="{{_id}}">{{firstname}} {{lastname}}</a></li>
                    <li><a class="result" data-id="{{_id}}">{{firstname}} {{lastname}}</a></li>
            </ul>

        </div>
    </div>

    <div class="col-xs-6">
        ...
    </div>
</div>