5

バックオフィス インターフェイスに mCustomScrollbar プラグインを実装しました。それは正常に動作します。しかし、フォームの 1 つに、オートコンプリートが必要な都市フィールドがあります。

オートコンプリートも正常に機能します。しかし、オートコンプリート ソース データからアイテムの 1 つを選択すると、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 に答える