jQueryUIのオートコンプリート検索結果をDOMの入力に隣接して配置します

私はjQueryUI's autocompleteを使用していますが、次の理由で検索を行っている入力タグの横のDOMに検索結果を移動したいと考えています。jQueryUIのオートコンプリート検索結果をDOMの入力に隣接して配置します

それは、this on jsFiddleを参照するのが最も簡単ですが、本質的な問題を実証コードがそうのようになります。

<html> <head> 
<link rel="stylesheet" type="text/css" 
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/flick/jquery-ui.css" /> 

<script src="http://www.google.com/jsapi" type="text/javascript"></script> 
<script type="text/javascript"> google.load("jquery", "1.4"); 
    google.load("jqueryui", "1.8"); </script> 
<script> 
$(function() { 
    $("#X").autocomplete({ 
     source: ['abc', 'def', 'ghi'] 
    }); 
}); 
</script> 
<style type="text/css"> 
    .B { display: none; } 
    .A:hover .B { display: block; } 
</style> 
</head> <body> 

Hello 
<div class='A'> 
select: 
    <div class='B'> 
    <input id='X' /> 
    </div> 
</div> 
World 

</body> </html>

問題は1がオートコンプリートオプションの上にマウスを置いたときにオートコンプリートinputタグを含む要素は、もはやであることではありません'mouseover'ed'で、CSS規則に従って、コンテナで入力タグが消えます。これは望ましい動作ではありません。オートコンプリートの選択をハイライト表示するときに、入力タグを表示したままにしておきたい。

オートコンプリート要素を入力タグ（つまりx = $("#X"); x.append(x.autocomplete('widget'))）の横にあるDOMに移動することができ、CSSルールによって入力とその親が表示されることが期待されます。悲しいかな、これはうまくいきません。

このようなCSSとjQueryUIの組み合わせをどのように達成するかについて、私は感謝しています。

ありがとうございます。

ブライアン

出典

2010-12-06 Brian M. Hunt

これは、jQueryのUIでネイティブにサポートされるべきもののように思えます！とにかく、ここで私がうまくいくと思う何か：

$("#X").autocomplete({ 
    source: ['abc', 'def', 'ghi'], 
    open: function($event, ui) { 
     var $widget = $("ul.ui-autocomplete"); 
     var $input = $("#X"); 
     var position = $input.position(); 

     $("div.B").append($widget); 

     $widget.css("left", position.left + $input.width()); 
     $widget.css("top", position.top);  
    } 
});

は、これは、入力の右側にオートコンプリートボックスを移動することによって、ウィジェットを配置し、同じ<div><input>にウィジェットを追加することにより、ロールオーバー問題を解決します属する。

http://jsfiddle.net/U2B9f/1/

編集：このソリューションは、特にjQueryのUIの古いバージョンのため、動作しますが、以下のブライアンの答えは、よりよい解決策です。 autocompleteのappendToオプションを使用

、すなわち

$("#X").autocomplete({ 
    appendTo: $(".B"), 
    source: ['abc', 'def', 'ghi'], 
});

あなたはthis in action on jsFiddleを見ることができます：

出典

2010-12-06 04:35:12

驚くばかりです。ありがとう、アンドリュー。 :)これはjQuery UIがネイティブに行うべきものだと思います！ –

本当に意図しない動作である場合は、この問題のチケットを作成しました：http://bugs.jqueryui.com/ticket/6724 –

はここアンドリュー・ウィテカーさん（：http://bugs.jqueryui.com/ticket/6724と私は始めチケットあたり）に望ましい可能性が答えです。

出典

2010-12-06 19:06:26

これは素晴らしいですが、このオプションが存在することは決して分かっていませんでした！私はあなたがまだ目標の '' –

の真下にボックスを表示させるために、ちょっとトリッキーなことをしなければならないと思う@Andrew：それはいい？同様に、ボックスの位置を決める手口もありません。最新バージョンの 'autocomplete'も' position'引数をとります。https://github.com/jquery/jquery-ui/blob/master/uiを参照してください。 /jquery.ui.autocomplete.js！ –

jQueryUIのオートコンプリート検索結果をDOMの入力に隣接して配置します

答えて

関連する問題