jquery autocomplete使mCustomScrollbar在select上滾動到頂部

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

新版自定義scrollbars有一個高級選項autoScrollOnFocus 。

例：

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

Answer 2

我在自動完成方面遇到了同樣的問題。 選擇任何自動完成項目會將窗口滾動到頂部。

我在這里看到你的評論，我認為你得到了解決方案。

使用上面鏈接中提到的提示，我瀏覽了mcustomscrollbar.js代碼，只是注釋掉了第533行和第534行，並且它很適合我。

謝謝你的提示。 干杯!!

Answer 3

可能是與錨相關的問題？ 生成的自動完成項目的href是多少？ 如果你能提供生成的自動完成的html標記會很有幫助。

也許嘗試添加此（未測試）...

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

Answer 4

我遇到了類似的問題。 問題是第一次選擇項目時它專注於自動完成輸入元素，所以我所做的只是關注ajax成功時自動完成輸入元素，它解決了我的問題。

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