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

StackOverflow https://stackoverflow.com/questions/4607164

質問

私とほど複数のjquery-uiオートコンプリートウィジェット一枚としていきたいと考えている設定の幅れます。現在、私はこのようになります:

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

るようになっている溶液からのユーザーがトリガーの様々なautocompletes異なる受注は、このコードだけでスタイルに基づいて、の順に追加されたDOM.

時のオートコンプリートトリガー、ようですの作成 <ul> その位置での入力ボックスが起きたということです。残念ながら私なリクエストに一意な識別子がこの生成 <ul> ラッチを適用すか。

私の問題とは異な この, めんのみを使用してデフォルトのオートコンプリートではなく、オートコンプリート-コンボボックス.

また、掘りのオートコンプリート <ul> とのマッチングの異なるオートコンプリートボックス幅の値のリスト動作しないのいずれかの値を動的に生成されます。

そのアイデア?

役に立ちましたか？

解決

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

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

他のヒント

luquiの答えのようにI。あなたは（オーバーフローなどを隠さの原因である可能性があります）appendTo機能を使用することはできません状況にある場合しかし、あなたは正しいリストに変更を行っていることを確認するには、以下のコードを使用することができます。 

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

参考： http://docs.jquery.com/UI/Autocomplete#method-ウィジェットの

ていれば複数のコントロール用のオートコンプリートで、エレガントな解決方法が取得するには 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
            });
        }
    });
});

眺望 デモ.

上記のとおり、幅を自動補完リストとして計算して、最後のときを変えていかなければならないの open イベントです。

あなたはウィジェット<input>のに関して$('#myinput').data("autocomplete").menu持つオートコンプリートに添付の「UI-メニュー」を得ることができます。だから、幅を変更するために使用することができます。

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

あなたは、divの中にオートコンプリートをトリガされた入力ボックスをラップのdivに特定のIDを与え、そのdiv要素にではなく、文書の本文に自動完全なULを追加することができます。そのようにあなたは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>

余分なJavaScriptコードを使用せずに、あなたは1本の簡単なCSSラインを使用することができます：

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

だから、なぜこの作品との最小幅の

widthは時にはやった rkeverの答えに、のような使用open: function(event, ui) { ... }その解決策（と、JSによって上書きされますというだけの理由）私の場合には動作しません。それが便利になるように、しかし、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ハックを避け、それが役に立てば幸い！

I @MartinLögdbergの答えのようなしかし、あなたが固定サイズの幅を使用してではなく、幅を設定するために返された結果の上にいくつかの空想の数学をやっている場合、あなたはまた、単に

CSSの幅を設定することができます 
ul .ui-autocomplete {
  width: 50%;
}

マーティンLögdberg応答の改善。私は

ページ上の多くのテキストボックスを持っていたので、これは私のために、より良い仕事を 
$('.some-class').each(function(){
   var txt = $(this);
   txt.autocomplete({  
      source: mysource,  
      open: function() { 
          txt.autocomplete("widget").width(txt.outerWidth());
      }
   });  
});

API を読んでいます。クラスを追加したところです UIフロント 親のところへ ディビジョン 私の 入力, 、それはうまくいきます。

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

見る ここ :

[...] 入力フィールドの親が次のクラスであるかどうかチェックされます。 UIフロント. 。ui-front クラスの要素が見つかった場合、 メニューはその要素に追加されます. 。値に関係なく、要素が見つからない場合、メニューはボディに追加されます。

追加された要素により、メニューの位置と幅が決まります。

jQueryのUI 1.10

は、ウィジェット工場。その一環として、オートコンプリートは今と呼ばれる _resizeMenu の拡張ポイントを含み、表示する前にメニューをサイジングします。 

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

私はオートコンプリートメニューにフロートを追加することにより、CSSでこれを解決するために管理しました。

.ui-autocomplete { float: left; }

オートコンプリートメニューが配置さabsoluteと<body>の直接の子なので。私はそれが身体からの最大幅を取得し、すべての利用可能なスペースを取って回避するために、絶対それはインラインブロックとして表示することができない、それの位置は推測します。

また.ui-autocomplete { width: 1%; }が動作しているようです。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top