jquery - テキストボックスを基準にしてjqueryのオートコンプリート幅を設定する

Question

テキストボックスが異なるフォームにいくつかのオートコンプリートがあるため、オートコンプリートをリファクタリングしようとしました。それはうまくいきました... 1つの非常に厄介な詳細を除いて.

私のテキストボックスは、パーセンテージベースの幅で、サイズが異なり、class = "row" と "col-md-9" を使用してページをレイアウトするブートストラップ構造になっています。簡単に言うと、サイズが異なり、幅が事前設定されていません。

なぜこれが問題なのですか？幅を ul-autocomplete に設定しないということは、最初に要素を一致させようとすることを意味しますが、結果が展開するボックスよりも「幅が広く​​」なります。ほとんどの調査によると、CSS で weight: ?px を指定するだけで、重みの設定は簡単です。明らかに、私はそれを行うことはできません。それで、私のオプションは何ですか？

必要に応じて私のjquery：

$('*[data-autocomplete-url]')
        .each(function () {
            var ddl = $(this);
            $(this).autocomplete({
                dataType: 'json',
                source: function (request, response) {
                    $.get((ddl.data("autocomplete-url")), { phrase: request.term }, function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.Text,
                                value: item.Value,
                                id: item.Value
                            };
                        }));
                    });
                },
                focus: function (event, ui) {
                    event.preventDefault();
                    ddl.val(ui.item.label);
                },
                change: function (event, ui) {
                    if (!ui.item) {
                        ddl.val("");
                    }
                },
                autoFill: true,
                mustMatch: true,
                minLength: 4,
            });
        });