Angular UI Bootstrap typeaheadを使用して、ユーザーがテキスト入力フォーム コントロールに入力するときに、カスタマイズされた候補のリストを表示します。このフォーム コントロールは、コンテンツのサイズが変動しても一定の div サイズを維持するために、jQuery slimScroll を使用して div 内に存在します。タイプアヘッドが通常の html 選択ドロップダウンのようにすべての上に表示されることを本当に望んでいましたが、残念ながら、このplunkerに見られるように表示されません。z-index をいじって、位置と表示のプロパティを調整してみました。すべての無駄な努力。
タイプアヘッドポップアップを親の境界線の上に表示する方法を知っている人はいますか? そうでない場合、select タグに HTML コンテンツを表示するよう強制して、グリフィコンや強調テキストなどを提案リストに含める方法はありますか?
問題はスリム スクロールにあります。相対位置とオーバーフローが非表示の div 内にいます (iFrame と考えてください)。小さな回避策があります...基本的に、生成された UL (.dropdown-menu) の位置をfixedに設定し、高さを設定してから、overflow:scroll を設定できます...いくつかのシナリオで機能します入力フィールドの位置は固定されています... そうしないと、入力がどこにあるかを制御し、オートコンプリートの位置を調整してフォローする必要があり、他の厄介なスクリプトがたくさんあります。
あなたのアプリケーションを見ないと、なぜあなたがこの特定のアーキテクチャを持っているのか理解できませんが、slimscroll の外でオートコンプリートを処理するためのよりクリーンなオプションがあるに違いないと言えます。
typeahead コントロールに typeahead-append-to-body="true" を設定したところ、機能しました。正確な理由はわかりませんが、確かに簡単な解決策です。