jquery自动完成使mCustomScrollbar在选择时滚动到顶部

Question

我已经在我的后台界面中实现了 mCustomScrollbar 插件。它工作正常。但在我的一种形式中，我有一个需要自动完成的城市字段。

自动完成功能也可以正常工作。但是，当我从自动完成源数据中选择一项时，mCustomScrollbar 插件会自动将我带到滚动内容的顶部，我必须再次单击才能真正选择该项。

这就是我实现滚动条插件的方式：

$('#mainContent').mCustomScrollbar({
        set_height: height,
        scrollInertia: 500,
        scrollEasing: "easeInOutQuad",
        mouseWheel: 20,
        autoDraggerLength: true,
        advanced: {
            updateOnBrowserResize: true,
            updateOnContentResize: false
        }
    });

这就是我实现自动完成的方式：

el.autocomplete({
    source: function (request, response) {
        $.ajax({
            url: activityAutocomplete,
            dataType: "json",
            data: request,
            success: function (data) {
                if (data.length == 0) {
                    data.push({
                        label: "Pas de résultat"
                    });
                }
                response(data);
            }
        });
    },
    //If overflow edge of window, the autocomplete flips to top of input
    position: { collision: "flip" },
    autofocus: true,
    delay: 150,
    minLength: 1,
    select: function (event, ui) {
        //ui.hide();
        //The following code resizes the input by bluring it.
        setTimeout(function () { el.autoGrowInput(); }, 50);


    },
    appendTo: '#autocomplete-tb-city-' + el.parents('.item').attr('id')
});

希望你能在这里发现问题，我已经为此工作了 3 天！

编辑：这是生成的自动完成标记。

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all"   role="listbox" aria-activedescendant="ui-active-menuitem">
    <li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">Angers</a</li>
    <li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">Amiens</a</li>
</ul>

我必须添加一些可能很重要的内容：即使在右键单击时，它也会让我达到顶峰！！

谢谢。

Answer 1

我遇到了类似的问题。问题出在第一次选择项目时，它专注于自动完成输入元素，所以我所做的只是关注 ajax 成功的自动完成输入元素，它解决了我的问题。

$('#'+id of input element).focus();

Answer 2

自定义scrollbars的新版本有一个高级选项autoScrollOnFocus。

例子：

        $($element).find('> .scrollbars').mCustomScrollbar({
            horizontalScroll: false,
            autoDraggerLength: true,
            autoHideScrollbar: true,
            advanced:{
                autoScrollOnFocus: false,
                updateOnContentResize: true,
                updateOnBrowserResize: true
            }
        });

Answer 3

我在使用自动完成时遇到了同样的问题。选择任何自动完成项目会将窗口滚动到顶部。

我看到你的评论here，我想你找到了解决办法。

使用您在上面链接中提到的提示，我浏览了 mcustomscrollbar.js 代码，只是注释掉了第 533 和 534 行，是的，它对我有用。

感谢您的提示。干杯！！

Answer 4

可能是与锚点相关的问题？生成的自动完成项目的href是什么？如果您可以提供生成的自动完成的 html 标记，将会很有帮助。

也许尝试添加这个（未测试）...

$( [auto-complete suggestions] ).live("click", function(e){
e.preventDefault();
});