jQuery自动完成功能会停用引导菜单下拉列表

时间:2013-01-29 14:44:44

标签: jquery asp.net twitter-bootstrap autocomplete

我使用twitter bootstrap作为我的网站框架。我也在使用jQuery。

在我的主导航栏中,我有一个包含搜索框的引导下拉列表。搜索框有一个完美的jQuery自动完成功能。

我的问题是,当用户点击自动完成列表中的一个项目时,引导下拉关闭会阻止用户单击“搜索”按钮,直到他们重新打开下拉列表(搜索查询仍然存在)

显然这让我的用户感到烦恼......

当从自动完成列表中进行选择时,是否有一种简单的方法可以阻止下拉关闭?这是由于两个框架之间的冲突吗?

Auto Complete

提前致谢。

戈登

更新:

使用以下代码解决了这个问题:

    <script type="text/javascript">
           $(document).ready(function () {
               $('body').find('.ui-autocomplete').click(function (e) {
                        e.stopPropagation();
               });
            });
    </script>

这会在单击时停止ui-autocomplete下拉元素上的传播并保持引导下拉列表打开以允许用户单击搜索按钮。

感谢isherwood指针

1 个答案:

答案 0 :(得分:1)

这不是冲突,而是Bootstrap菜单的正常行为。我为此目的使用这些功能:

$(function() {
    //prevent menu from closing when clicking into a form element
    $('.drop').find('form').click(function (e) {
        e.stopPropagation();
    });

    // other elements with the 'stay-open' class
    $('.drop').find('.stay-open').click(function (e) {
        e.stopPropagation();
    });
});