web-dev-qa-db-ja.com

divの入力フィールドをposition：fixedで使用すると、JqueryUiオートコンプリートが間違った場所に表示される

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

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

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

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

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

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

cssjquery-uiinputpositionjquery-ui-autocomplete
14
JeanValjean

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

ただし、ドキュメントには、オプション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;
}
_

それで全部です！

47
JeanValjean

@Riappの回答を読んだ後にこれを発見したJqueryの1つのバージョンと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" />
2
Mikeys4u

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

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

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

1
rogerthat