web-dev-qa-db-ja.com

jquery-uiオートコンプリートウィジェットの幅を個別に変更する

1つのページで複数のjquery-uiオートコンプリートウィジェットを使用していて、各ウィジェットの幅を個別に設定できるようにしたいと考えています。現在、私はこのようにしています：

$($('.ui-autocomplete')[0]).width(150);
$($('.ui-autocomplete')[1]).width(105);
$($('.ui-autocomplete')[2]).width(80);

ユーザーはさまざまな順序でさまざまなオートコンプリートをトリガーでき、このコードはDOMに追加された順序に基づいてスタイルを設定するだけなので、実際にはソリューションではありません。

オートコンプリートがトリガーされると、<ul>が作成され、トリガーされた入力ボックスの下に配置されます。残念ながら、この生成された<ul>に固有の識別子が見つからないため、CSSにラッチして適用できません。

Autocomplete-comboboxではなく、デフォルトのオートコンプリートのみを使用しているため、私の問題は this one とは異なります。

また、値が動的に生成されるため、オートコンプリート<ul>を掘り下げ、さまざまなオートコンプリートボックスの幅をリスト内の値と一致させることもできません。

何か案は？

jquerycssjquery-uijquery-ui-autocomplete
25
CamelBlues

利用可能な「open」イベントを使用してこの問題を解決しました。他のアイテムと一緒に動的に幅を設定する方法が必要で、余分なマークアップは必要ありませんでした。

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    open: function() { $('#div .ui-menu').width(300) }  
});
50
rkever

ルキの答えが好きです。ただし、appendTo機能を使用できない状況（オーバーフローの非表示などが原因である可能性があります）の場合は、以下のコードを使用して、正しいリストに変更を加えていることを確認できます。

$('#input').autocomplete({  
    source: mysource,  
    open: function() { 
        $('#input').autocomplete("widget").width(300) 
    }  
});

参照： http://docs.jquery.com/UI/Autocomplete#method-widget

33
Martin Lögdberg

オートコンプリートを使用する複数のコントロールがある場合、かなり洗練されたソリューションは、最後にコントロールにアタッチされた widget を取得し、そのCSSを変更することです。

$(document).ready(function() {
    $("input#Foo").autocomplete({
        source: source
    });
    $("input#Bar").autocomplete({
        source: source,
        open: function(event, ui) {
            $(this).autocomplete("widget").css({
                "width": 400
            });
        }
    });
});

Demo を表示します。

上記のように、オートコンプリートリストの幅は最後の瞬間に計算されるため、 open イベントで変更する必要があります。

13
Salman A

$('#myinput').data("autocomplete").menuに関してオートコンプリート機能を備えた<input>に接続された「ui-menu」ウィジェットを取得できます。だから幅を変えるには

$('#myinput').autocomplete({
    source: yourUrlOrOtherSource,
    open: function () {
        $(this).data("autocomplete").menu.element.width(80);
    }
});
4
Oleg

追加のJavaScriptコードを使用せずに、1つの単純なCSS行を使用できます。

_<style type="text/css">
    .ui-menu,.ui-menu>.ui-menu-item,.ui-menu-item>a {min-width:800px !important}
</style>
_

では、なぜこれがmin-widthで機能するのですか？

単にwidthがJSによって上書きされるため、open: function(event, ui) { ... }を使用するソリューションでさえも（私の場合は rkever's answer のように機能しませんでした）。ただし、_min-width_は上書きされないため、便利です。

また、使用したくない場合使用したくない場合_!important_の場合、残りのクラスでルールをさらに詳しく説明できます。

_.ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all,.ui-menu>.ui-menu-item,.ui-menu-item>a
 {min-width:800px}
_

これにより、JSハックをさらに回避できました。

1
Armfoot

オートコンプリートをトリガーする入力ボックスをdivでラップし、divに特定のIDを指定して、オートコンプリートulをドキュメントの本文ではなくそのdivに追加できます。そうすれば、divに基づくcssでそれをターゲットにすることができます。

<!- this is how i would set up the div -->
<div class='autoSuggestWrapper' id='wrapper1'>
     <input class='autocomplete'>
</div>
<script>/* this is a way to config the autocomplete*/
   $( ".autocomplete" ).autocomplete({ appendTo: ".autoSuggestWrapper" });
</script>
1
scrappedcola

オートコンプリートメニューにフロートを追加することで、CSSでこれを解決することができました。

.ui-autocomplete { float: left; }

オートコンプリートメニューがabsoluteと<body>の直接の子に配置されているため。ボディから最大幅を取得していると思います。絶対的な位置であるため、使用可能なスペースをすべて使用しないようにインラインブロックとして表示することはできません。

また、.ui-autocomplete { width: 1%; }は動作するようです。

0
Trevald

MartinLögdbergの回答の改善。ページに多くのテキストボックスがあったので、これは私にとってよりうまくいきました

$('.some-class').each(function(){
   var txt = $(this);
   txt.autocomplete({  
      source: mysource,  
      open: function() { 
          txt.autocomplete("widget").width(txt.outerWidth());
      }
   });  
});
0
Ben Anderson

JQuery UI 1.10以降、オートコンプリートウィジェットは widget factory を使用して書き直されました。その一部として、オートコンプリートには _resizeMenu 拡張ポイント。表示する前にメニューのサイズを変更するときに呼び出されます。

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    _resizeMenu: function() {
        this.menu.element.outerWidth( 500 );
    }
});
0
saluce

APIを読んで、私はクラスi-frontを親のdivに追加しましたinputで、それはうまく機能します。

<div class="ui-front">
    <label for="autosample" class="required">example</label>
    <input name="autosample" class="default-autocomplete" type="text">
</div>

こちら を参照してください：

[...]入力フィールドの親は、クラスi-frontでチェックされます。 ui-frontクラスを持つ要素が見つかった場合、メニューはその要素に追加されます。値に関係なく、要素が見つからない場合、メニューは本文に追加されます。

追加された要素は、メニューの位置と幅を決定します。

0
Le Moineau

私は@MartinLögdbergの回答が好きですが、返された結果で幅を設定するためにいくつかの空想的な計算を行うのではなく、固定サイズの幅を使用している場合は、CSSで幅を設定することもできます

ul .ui-autocomplete {
  width: 50%;
}
0
ants