JqueryUiオートコンプリートは：

Question

私はfixedにdiv CSSプロパティpositionに適用したWebページに「モーダルウィンドウ」を持って固定しました。 divには入力フィールドが含まれています。特に、オートコンプリートウィジェットをjQueryUIから使用しています。

1）最初は、divが固定位置にあるため、ウェブページを下にスクロールするとオートコンプリート候補は固定されて表示されず、ページとともに上下に移動します。あなたはこの問題をこのCodepenで見ることができます。ここでは、jQuery Webサイトのcity-name autocompletionを使用しています。

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

私はこの問題がCSS、特にJQuery-UIによって提供されるこのようなスタイルのプロパティによるものだと確信しています。オートコンプリートウィジェットのposition optionを使用すると、問題が解決する可能性があります。

定義するCSSのプロパティとその方法は？

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

Answer 1

jQuery UIライブラリを見ると、私は< ul>要素を使って提案を表示していることがわかります。 jQuery UIは、この要素をデフォルトでHTML文書に追加し、入力の< div>（「モーダルウィンドウ」として使用）ではなく、HTML文書にこの要素を追加します。

ただし、ドキュメントが< UL>がに追加されなければならない要素オートコンプリートオプションappendTo設定していることを示しています。それはjQueryのappendTo()関数を使用します。

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

そしてautocomplete()機能で、私はオプションを追加しました：： http://jqueryui.com/demos/autocomplete/#option-appendTo

だから、私はへのdivが提案含ま含ま

appendTo: "#container" 

は、それから私は、次のCSSを追加しまし

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

それだけです！

Answer 2

も同じ問題がありました。 jquerUIの基本テーマを削除し、jqueryUIライブラリをアンインストールしてからjqueryUIを再インストールしてください。あなたが何を使っているのかはっきりしていませんが、私はMVC4で非常に多くのバグがあります。私は自分自身を殺すつもりです。がんばろう。

EDIT：これはオートコンプリートは、我々は古いプロジェクト内のスタイルの多くは、新しいされていないことを発見した仕事をしていたかどうかを確認するために、古いプロジェクトを見て本当の問題

ました。私がそれらを消去したのかどうかはわかりませんが、そうすることは想像できません。私がやらなければならなかったのは、私の新しいプロジェクトに欠けていたクラスをコピー＆ペーストすることだけでした。私は誰かが私のプロジェクトを妨害していると思う。

Answer 3

あなたが唯一の私がRiappの答え​​@読んだ後にこれを発見した1つのjQueryのバージョンと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" />