2012-10-17 2 views
5

バックオフィスのインターフェイスにmCustomScrollbarプラグインを実装しました。それはうまく動作します。しかし、私のフォームの1つでは、オートコンプリートを必要とする都市のフィールドがあります。jqueryのオートコンプリートにより、選択時にmCustomScrollbarが上にスクロールする

オートコンプリートも正常に機能します。しかし、私がオートコンプリートソースデータからアイテムの1つを選択すると、mCustomScrollbarプラグインが自動的にスクロールするコンテンツの先頭に移動し、アイテムを実際に選択するためにもう一度クリックする必要があります。私は私がしてきた、あなたはここで間違って何かを見つけることができます願っています

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') 
}); 

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

そして、これは私がオートコンプリートを実装する方法である:

これは私がスクロールバーのプラグインを実装する方法ですこのような3日間の作業!

EDIT:これは生成されたオートコンプリートマークアップです。

<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> 

重要なことを追加する必要があります:それは右クリックでもトップに私をもたらします!

ありがとうございます。

答えて

2

これを追加してみてください。オートコンプリート項目を選択すると、ウィンドウが一番上にスクロールします。

私はあなたのコメントhereを見ました。あなたは解決策を得ていると思います。

上記のリンクでヒントを使用して、私はmcustomscrollbar.jsコードを調べ、533行目と534行目をコメントアウトしてくれました。

ヒントをお寄せいただきありがとうございます。乾杯!

+0

はい、それは私のために働いた:)。 – aztuk

+0

いいですね、クールです:) – varunvlalan

0

アンカーに関連する問題がありますか?自動完成のために生成されたアイテムのhrefは何ですか?生成された自動補完のhtmlマークアップを提供できると便利です。

多分私はオートコンプリートと同じ問題に直面していた...(テストしていません)

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

私は、項目の選択がもはや機能し、ことを試したことはありません、また、まだトップに私をもたらします。 – aztuk

+0

私たちが確認できるどこかで問題をアップロードできますか? – zeddotes

+0

ローカルネットワークで作業していますが、どうすればアップロードできますか?私はそれをjsFiddleで動作させようとしましたが、プラグインはMimeタイプのためにこれで動作しません。 – aztuk

9

新しいバージョンのカスタムscrollbarsは、高度なオプションautoScrollOnFocusを持っています。

例:

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

「autoScrollOnFocus:false」を設定すると、このプラグインフィールドのフォーカスエラーで私の問題が解決しました。 –

関連する問題