JQuery UIオートコンプリートボックスを実装しましたが、テキストボックスの幅ではなく、ドロップダウンオプションがページの残りの幅を埋めるように拡張されています。
この例を見て、自分で確認してください。 http://jsbin.com/ojoxa4
リストの幅を、作成直後に設定しようとしました。
$('.ui-autocomplete:last').css('width',
$('#currentControlID').width()
);
これは何もしないようです。
また、ページ上のスタイルを使用して幅を設定しようとしました:
ui-autocomplete { width: 500px; }
これは驚くほど機能しますが、ページ上のすべてのオートコンプリートは同じ幅でなければならないことを意味し、理想的ではありません。
各メニューの幅を個別に設定する方法はありますか?または、私にとって幅が正しく機能しない理由を誰かが説明できますか?
問題は、メニューが親要素(デフォルトでは本文)の幅いっぱいに拡大していることです。これは、正しい幅の要素を含むことで修正できます。
まず、次のような<div>
を追加しました。
<div id="menu-container" style="position:absolute; width: 500px;"></div>
絶対配置により、ドキュメントフローを中断することなく、入力の直後に<div>
を配置できます。
次に、オートコンプリートを呼び出すときに、オプションでappendTo
引数を指定します。これにより、メニューが<div>
に追加され、その幅が継承されます。
$('#myInput').autocomplete({ source: {...}, appendTo: '#menu-container'});
これにより問題が修正されます。ただし、プラグインが正常に機能するのではなく、なぜこれが必要なのかを知りたいと思っています。
私はこれを使用しますドロップインソリューション:
jQuery.ui.autocomplete.prototype._resizeMenu = function () {
var ul = this.menu.element;
ul.outerWidth(this.element.outerWidth());
}
これは基本的に @ madcapnmckay のソリューションですが、元のソースを変更する必要はありません。
オートコンプリートコードを掘り下げましたが、犯人はこの小さなlightです
_resizeMenu: function() {
var ul = this.menu.element;
ul.outerWidth( Math.max(
ul.width( "" ).outerWidth(),
this.element.outerWidth()
) );
},
Ul.width( "")が何をしているのかはわかりませんが、ui.width( "")。outWidth()は常にulが追加されるため、ボディの幅を返します。したがって、幅が要素の幅に設定されることはありません。
とにかく。修正するには、これをコードに追加するだけです
$element.data("autocomplete")._resizeMenu = function () {
var ul = this.menu.element;
ul.outerWidth(this.element.outerWidth());
}
これはバグですか?
編集:バグのテストケースを縮小したい人がいれば here です。
私はこれが長い間答えられてきたことを知っていますが、より良い解決策があると思います
$(".autocomplete").autocomplete({
...
open: function() {
$("ul.ui-menu").width( $(this).innerWidth() );
...
}
...
});
私にとってはうまくいきました。
私はこれがずっと前に答えられたことを知っていますが、私は同じ問題に遭遇しました。私の解決策は、position:absoluteを追加することでした
オープンイベントでcssを設定します!
$('#id').autocomplete({
minLength: 3,
source: function(request, response) {
$.ajax({
url: "myurl",
dataType: "json",
type: 'POST',
data: {
'q': request.term,
'maxRows': 15
},
success: function(data) {
response($.map(data, function(item) {
return {
label: item.name,
}
})),
}
})
},
select: function(event, ui) {
$("#id").val(ui.item.label);
},
focus: function ( event, ui ){
$form.find('#id').val(ui.item.label);
return false;
},
open: function(){
$('.ui-autocomplete').css('width', '300px'); // HERE
}
})
私もこの問題に遭遇しましたが、jquery.ui.autocomplete.cssスタイルシートへの参照を含めるのを忘れたことに気付きました。そのスタイルシートをレイアウト/マスターページに含めましたか?
$("#autocompleteID").autocomplete({
source: "http://myhost/magento/js/jquery/ui/php/ville.php",
minLength: 1,
open: function(event, ui)
{
$("#autocompleteID").autocomplete ("widget").css("width","300px");
}
});
まあ、エンダー。私のソリューションがあなたを助けることができるかどうかはわかりませんが、Jqueryui remote-with-cache.htmlではうまくいきました。テキストボックスにsize
プロパティを入力しました。
以下のコードをご覧ください:
<div class="demo">
<div class="ui-widget">
<label for="birds">Birds: </label>
<input id="birds" size="30"/>
</div>
</div>
Cssを使用したい場合は、これを試してください:
.ui-widget-content.ui-autocomplete{ width: 350px; }
すべてのオートコンプリート入力で機能します。
私の解決策は、idを持つdivにオートコンプリートを追加することで、その特定のulにCSSを設定しました:
jQuery/JavaScript:
$("input[name='search-text]").autocomplete({
appendTo: "#item-search-autocomplete",
source: ....
});
CSS:
#item-search-autocomplete .ui-autocomplete {
width: 315px;
}
魅力のように機能します。
幅を動的に設定することができず、これを含めようとする動作がまったくない場合
http://code.google.com/p/jquery-ui/source/browse/trunk/themes/base/jquery.ui.autocomplete.css?spec=svn3882&r=3882
リンクされたシートで、またはハードコーディングして、ここでパラメータを設定します。
他のすべてを試した後、私のために働いた
私はこれが長い間答えられてきたことを知っていますが、私が見つける最も簡単な方法は、オートコンプリートのIDを使用し、呼び出す幅を100pxに設定することです
$('.ui-autocomplete-input#MyId').css('width', '100px');
$('#MyId').autocomplete(...);
呼び出しを終了した後。このようにして、DOMのオートコンプリートテキストボックスの順序をスクリプトに結び付けないようにします。
公式のjQuery uiオートコンプリート(iは1.8.16)を使用していて、幅を手動で定義したい場合は、そうすることができます。
縮小版を使用している場合(そうでない場合は、_resizeMenuを照合して手動で検索します)、検索...
_resizeMenu:function(){var a=this.menu.element;a.outerWidth(Math.max(a.width("").outerWidth(),this.element.outerWidth()))}
...そしてそれを(Math.maxの前にthis.options.width ||を追加して)...
_resizeMenu:function(){var a=this.menu.element;a.outerWidth(this.options.width||Math.max(a.width("").outerWidth(),this.element.outerWidth()))}
... .autocomplete({width:200})関数に幅の値を含めることができるようになり、jQueryはそれを受け入れます。そうでない場合は、デフォルトで計算されます。