jQueryオートコンプリートスクロール可能ドロップダウン

Question

私はjQueryオートコンプリートテキストボックスを使っています。私のコードとスクリプトは正常に動作していますが、現在はプレーンなドロップダウンリストの代わりに 'スクロール可能なドロップダウン（X軸とY軸に沿って）'が必要です。

スクリプトは、オートコンプリートのドロップダウンを容易にするために使用される：1は、このリンクを参照することができ

$(function() { 
    $("#TextBox").autocomplete({ 
     source: "home/search", 
     dataType: 'json', 
     minLength: 1, 
     // max: 10, 
     // scroll:true 
    }); 
}); 

Answer 1

http://jqueryui.com/demos/autocomplete/#event-select、同じ問題

Answer 2

で立ち往生している場合はスクロール可能にXおよび/またはY軸をを設定することができ、オートコンプリートスクリプトでは実行されていませんが、オートコンプリートスタイルで行われます。スクリプトは、要素の表示方法、相互作用方法のみに責任を負いません。あなたが変更しようとしている特定のスタイルはui-autocompleteクラスです。

最大200pxの高さと250pxの幅のドロップダウンを望むとします（すべてを埋めるのに十分な結果が得られない場合は、それを小さくすることができます）。次に、これをCSSに追加します。

.ui-autocomplete { 
    /* these sets the height and width */ 
    max-height:200px; 
    max-width: 236px; 

    /* these make it scroll for anything outside */ 
    overflow-x:scroll; 
    overflow-y:scroll; 
} 

サイズを変更する場合は、上記のサイズを変更するだけです。あなたがjQuery UI autocomplete siteの詳細を読むことができます

.ui-autocomplete { 
    /* same as above */ 
    max-height:200px; 
    max-width: 236px; 

    /* note that x is hidden now */ 
    overflow-x:hidden; 
    overflow-y:scroll; 
} 

：あなたはx軸がスクロール可能ではない作るが、Yを維持したい場合は、それを変更します。右の「スクロール可能な結果」セクションにリンクしています。「ソースの表示」をクリックすると、完全な例が表示されます。彼らは、IEが最大高さをサポートしていないことをよく知っているので、IEサポートの高さだけを設定する必要があります。

Answer 3

誰もが同じ問題（垂直スクロールでオートコンプリートを望んでいる） 使用これで立ち往生している場合：

.ui-autocomplete 
{ 
    height: 200px; 
    overflow-y: auto; 
}