5

我已经在我的后台界面中实现了 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>

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

谢谢你。

4

4 回答 4

9

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

例子：

        $($element).find('> .scrollbars').mCustomScrollbar({
            horizontalScroll: false,
            autoDraggerLength: true,
            autoHideScrollbar: true,
            advanced:{
                autoScrollOnFocus: false,
                updateOnContentResize: true,
                updateOnBrowserResize: true
            }
        });
于 2013-04-12T13:15:48.163 回答
2

我在自动完成方面面临同样的问题。选择任何自动完成项目会将窗口滚动到顶部。

我在这里看到了你的评论，我认为你得到了解决方案。

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

感谢您的提示。干杯！！

于 2012-10-18T07:19:21.237 回答
0

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

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

$( [auto-complete suggestions] ).live("click", function(e){
e.preventDefault();
});
于 2012-10-17T13:19:07.360 回答
0

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

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

于 2018-08-28T05:51:23.890 回答