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

您应该在data-toggle上设置input，而不是在input-group上设置属性<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>。

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

代码

{{1}}

Bootstrap下拉列表不适用于输入组

1 个答案: