14

css プロパティを に適用して取得した Web ページに「モーダル ウィンドウ」があります。には入力フィールドが含まれています。特に、jQueryUIのオートコンプリート ウィジェットを使用しています。次の 2 つの大きな問題があります。divpositionfixeddiv

1) 1 つ目は、div の位置が固定されているため、Web ページを下にスクロールすると、オートコンプリートの提案が固定されて表示されず、ページとともに上下に移動することです。このCodepenでその問題を確認できます。ここでは、都市名のオートコンプリートを使用した jQuery Web サイトの例を使用しています。

2) 2 つ目の問題は、オートコンプリートの候補が入力フィールドのすぐ下ではなく、ページの左上隅に表示されることです。残念ながら、Codepen でこの問題を再現しようとしましたが、できません。

この問題は CSS が原因であり、特に JQuery-UI によって提供されるスタイル プロパティが原因であると確信しています。オートコンプリート ウィジェットの位置オプションを使用することで、問題を解決できる可能性があります。

どの CSS プロパティをどのように定義する必要がありますか?

PS: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.cssで提供されているテーマを使用します。

4

3 に答える 3

53

jQuery UI ライブラリを見ると、<ul>要素を使用して候補が表示されていることがわかります。jQuery UI は、デフォルトでこの要素を HTML ドキュメントに追加し、テキスト入力の<div> (「モーダル ウィンドウ」として使用) には追加しません。

ただし、ドキュメントは、オプションappendToがオートコンプリート<ul>を追加する必要がある要素を構成することを示しています。jQueryのappendTo()機能を利用しています。 http://jqueryui.com/demos/autocomplete/#option-appendTo

したがって、提案を含む div を含めました。

<input type="text" id="myInput" />
<div id="container">
</div>

そして、autocomplete()関数にオプションを追加しました：

appendTo: "#container"

次に、次のCSSを追加しました 

#container {
    display: block; 
    position:relative
} 
.ui-autocomplete {
    position: absolute;
}

それで全部です！

于 2012-09-02T13:52:37.250 に答える
3

Jquery の 1 つのバージョンと、@Riapp の回答を読んだ後にこれを発見した UI の 1 つだけをロードするようにしてください。遊んでみたところ、一致するバージョン番号が必要であり、決して多すぎないことがわかりました....

それ以外の場合、オートコンプリートは絶対になり、一番上に飛びます。

 <script type="text/javascript"
    src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css"
    href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />
于 2015-05-09T00:25:27.440 に答える
1

同じ問題がありました。jquerUI ベース テーマを削除し、jqueryUI ライブラリをアンインストールしてから jqueryUI を再インストールすると、正常に動作するようになりました。何を扱っているのかわかりませんが、私は MVC4 を使用していてバグが多すぎて、自殺しようとしています。幸運を。

編集：これが本当の問題でした

オートコンプリートが機能しているかどうかを確認するために古いプロジェクトを調べたところ、古いプロジェクトの多くのスタイルが新しいプロジェクトにないことがわかりました。それらを消去したかどうかはわかりませんが、消去することは想像できません。私がしなければならなかったのは、新しいプロジェクトに欠けていたクラスをコピーして貼り付けるだけで、すべてが正常に戻りました. 誰かが私のプロジェクトを妨害しているようです。

于 2013-08-12T22:18:07.867 に答える