Twitter bootstrap 引导下拉列表不使用输入组

我正在尝试做一个下拉输入，用作搜索框。我希望它的工作方式类似于堆栈溢出标记框。你搜索用户，它会弹出建议，你点击其中一个，它会填充该选项并激活一个按钮，然后你可以用它取消该选项并重新开始该过程

一切都很好，除了当我在a中添加按钮时，下拉框停止下降。它现在根本不显示

以下是html：

X

{{{#每个查询结果}
看看为什么它不完美）直到我把东西放到输入组。这就是我不能做的事吗？我是不是太贪心了

提前谢谢
 不应在
输入
上设置属性
数据切换
，而应在
输入组
上设置该属性

它适用于此引导层：

代码

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


X

{{firstname}}{{lastname}}
{{firstname}}{{lastname}}
{{firstname}}{{lastname}}
{{firstname}}{{lastname}}
{{firstname}}{{lastname}}
{{firstname}}{{lastname}}

...
您应该查看我的另一个问题。谢谢