jQuery UI オートコンプリートの幅が正しく設定されない件

質問

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

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

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

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

これは何もしていないように見える。

ページ上のスタイルを使って幅を設定することも試してみました。

ui-autocomplete { width: 500px; }

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

各メニューの幅を個別に設定する方法はありますか? あるいは、より良い方法は、なぜ幅が正しく機能しないのか、どなたか説明していただけないでしょうか。

どのように解決するのですか？

この問題は、メニューが親要素（デフォルトでは body）の幅いっぱいに展開されることに起因しています。 これは、正しい幅の包含要素を与えることによって修正することができます。

まず、私は <div> のようにします。

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

絶対位置指定によって <div> を入力の直後に配置することができます。

そして、オートコンプリートを呼び出す際に、入力の直後に appendTo という引数をオプションで指定すると、メニューは私の <div> に追加され、その幅が継承されます。

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

これで問題は解決しました。 しかし、プラグインが正しく動作するのではなく、なぜこのようなことが必要なのか、まだ知りたいと思います。