web-dev-qa-db-ja.com

jQuery UIのオートコンプリートの幅が正しく設定されていません

JQuery UIオートコンプリートボックスを実装しましたが、テキストボックスの幅ではなく、ドロップダウンオプションがページの残りの幅を埋めるように拡張されています。

この例を見て、自分で確認してください。 http://jsbin.com/ojoxa4

リストの幅を、作成直後に設定しようとしました。

$('.ui-autocomplete:last').css('width',
                               $('#currentControlID').width()
                              );

これは何もしないようです。

また、ページ上のスタイルを使用して幅を設定しようとしました：

ui-autocomplete { width: 500px; }

これは驚くほど機能しますが、ページ上のすべてのオートコンプリートは同じ幅でなければならないことを意味し、理想的ではありません。

各メニューの幅を個別に設定する方法はありますか？または、私にとって幅が正しく機能しない理由を誰かが説明できますか？

jqueryjquery-uiautocompletejquery-ui-autocomplete
67
Ender

問題は、メニューが親要素（デフォルトでは本文）の幅いっぱいに拡大していることです。これは、正しい幅の要素を含むことで修正できます。

まず、次のような<div>を追加しました。

<div id="menu-container" style="position:absolute; width: 500px;"></div>

絶対配置により、ドキュメントフローを中断することなく、入力の直後に<div>を配置できます。

次に、オートコンプリートを呼び出すときに、オプションでappendTo引数を指定します。これにより、メニューが<div>に追加され、その幅が継承されます。

$('#myInput').autocomplete({ source: {...}, appendTo: '#menu-container'});

これにより問題が修正されます。ただし、プラグインが正常に機能するのではなく、なぜこれが必要なのかを知りたいと思っています。

58
Ender

私はこれを使用しますドロップインソリューション：

jQuery.ui.autocomplete.prototype._resizeMenu = function () {
  var ul = this.menu.element;
  ul.outerWidth(this.element.outerWidth());
}

これは基本的に @ madcapnmckay のソリューションですが、元のソースを変更する必要はありません。

101
Arnaud Leymet

オートコンプリートコードを掘り下げましたが、犯人はこの小さな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 です。

37
madcapnmckay

私はこれが長い間答えられてきたことを知っていますが、より良い解決策があると思います

$(".autocomplete").autocomplete({
    ...
    open: function() {
        $("ul.ui-menu").width( $(this).innerWidth() );
        ...
    }
    ...
});

私にとってはうまくいきました。

24
obomaye

私はこれがずっと前に答え​​られたことを知っていますが、私は同じ問題に遭遇しました。私の解決策は、position：absoluteを追加することでした

22
Andrius Chamentauskas

オープンイベントで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
            }
        })
19
hmoyat

私もこの問題に遭遇しましたが、jquery.ui.autocomplete.cssスタイルシートへの参照を含めるのを忘れたことに気付きました。そのスタイルシートをレイアウト/マスターページに含めましたか？

15
Nick Olsen
$("#autocompleteID").autocomplete({
source: "http://myhost/magento/js/jquery/ui/php/ville.php",
minLength: 1,
open: function(event, ui)
{
   $("#autocompleteID").autocomplete ("widget").css("width","300px");  
} 
});
3
pradip_PRP

まあ、エンダー。私のソリューションがあなたを助けることができるかどうかはわかりませんが、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>
1
Meng Lengkhim

Cssを使用したい場合は、これを試してください：

.ui-widget-content.ui-autocomplete{ width: 350px; }

すべてのオートコンプリート入力で機能します。

0
Flea

私の解決策は、idを持つdivにオートコンプリートを追加することで、その特定のulにCSSを設定しました：

jQuery/JavaScript：

$("input[name='search-text]").autocomplete({
    appendTo: "#item-search-autocomplete",
    source: ....
});

CSS：

#item-search-autocomplete .ui-autocomplete {
    width: 315px;
}

魅力のように機能します。

0
Eric Belair

幅を動的に設定することができず、これを含めようとする動作がまったくない場合

http://code.google.com/p/jquery-ui/source/browse/trunk/themes/base/jquery.ui.autocomplete.css?spec=svn3882&r=3882

リンクされたシートで、またはハードコーディングして、ここでパラメータを設定します。

他のすべてを試した後、私のために働いた

0
user489419

私はこれが長い間答えられてきたことを知っていますが、私が見つける最も簡単な方法は、オートコンプリートのIDを使用し、呼び出す幅を100pxに設定することです

$('.ui-autocomplete-input#MyId').css('width', '100px');

$('#MyId').autocomplete(...);呼び出しを終了した後。このようにして、DOMのオートコンプリートテキストボックスの順序をスクリプトに結び付けないようにします。

0
arviman

公式の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はそれを受け入れます。そうでない場合は、デフォルトで計算されます。

0
Harry B