25

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

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

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

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

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

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

何か案は？

4

11 に答える 11

50

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

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    open: function() { $('#div .ui-menu').width(300) }  
});
于 2011-04-19T21:46:58.850 に答える
33

ルキの答えが好きです。しかし、appendTo 機能を使用できない状況にある場合 (overflow hidden などが原因である可能性があります)、以下のコードを使用して、正しいリストに変更を加えていることを確認できます。 

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

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

于 2011-05-22T20:35:24.010 に答える
14

オートコンプリートを使用する複数のコントロールがある場合、合理的に洗練された解決策は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イベントで変更する必要があります。

于 2011-05-25T07:38:56.350 に答える
4

<input>に関するオートコンプリート機能にアタッチされた「ui-menu」ウィジェットを取得できます$('#myinput').data("autocomplete").menu。したがって、使用できる幅を変更するには

$('#myinput').autocomplete({
    source: yourUrlOrOtherSource,
    open: function () {
        $(this).data("autocomplete").menu.element.width(80);
    }
});
于 2011-08-07T10:00:35.707 に答える
1

オートコンプリートをトリガーしている入力ボックスを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>
于 2011-01-05T17:42:49.773 に答える
1

追加の 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ハッキングを回避できました。

于 2015-12-07T17:05:40.657 に答える
0

@Martin Lögdbergの回答が好きですが、返された結果に対して派手な計算を行って幅を設定するのではなく、固定サイズの幅を使用している場合は、CSSで幅を設定することもできます

ul .ui-autocomplete {
  width: 50%;
}
于 2012-08-22T16:00:37.320 に答える
0

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

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    _resizeMenu: function() {
        this.menu.element.outerWidth( 500 );
    }
});
于 2015-11-05T15:47:49.720 に答える
0

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

$('.some-class').each(function(){
   var txt = $(this);
   txt.autocomplete({  
      source: mysource,  
      open: function() { 
          txt.autocomplete("widget").width(txt.outerWidth());
      }
   });  
});
于 2014-05-01T16:06:46.480 に答える
0

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

.ui-autocomplete { float: left; }

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

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

于 2016-11-08T12:41:28.577 に答える