jquery - Bootstrap Tokenfields 设置下拉宽度

Question

我正在使用 Bootstraps Tokenfields，我发现由于某种原因，我打开的列表上的宽度设置为超过 1000

<ul id="ui-id-1" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" style="min-width: 98px; width: 510.656px; top: 994px; left: 281px; display: none;">
    <li class="ui-menu-item">
        <div id="ui-id-29" tabindex="-1" class="ui-menu-item-wrapper">red</div>
    </li><li class="ui-menu-item">
        <div id="ui-id-30" tabindex="-1" class="ui-menu-item-wrapper">blue</div>
    </li>
    <li class="ui-menu-item">
        <div id="ui-id-31" tabindex="-1" class="ui-menu-item-wrapper">green</div>
    </li>
    <li class="ui-menu-item">
        <div id="ui-id-32" tabindex="-1" class="ui-menu-item-wrapper">yellow</div>
    </li>
    <li class="ui-menu-item">
        <div id="ui-id-33" tabindex="-1" class="ui-menu-item-wrapper">violet</div>
    </li>
    <li class="ui-menu-item">
        <div id="ui-id-34" tabindex="-1" class="ui-menu-item-wrapper">brown</div>
    </li>
    <li class="ui-menu-item">
        <div id="ui-id-35" tabindex="-1" class="ui-menu-item-wrapper">purple</div>
    </li>
    <li class="ui-menu-item">
        <div id="ui-id-36" tabindex="-1" class="ui-menu-item-wrapper">black</div>
    </li>
    <li class="ui-menu-item">
        <div id="ui-id-37" tabindex="-1" class="ui-menu-item-wrapper">white</div>
    </li>
</ul>

我尝试将 css 设置为 width:100% 但它只是在运行时被覆盖。

.ui-autocomplete {
    max-height: 200px !important;
    overflow-y: auto !important;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    border:1px solid #222;
    position:absolute;
  }

我也尝试设置上面的 css 但没有任何反应。

我还看到我可以尝试通过 jquery 来设置它，但这也不起作用

<script>
    $('#tokenfield').tokenfield({
        autocomplete: {
          source: ['red','blue','green','yellow','violet','brown','purple','black','white'],
          delay: 100
        },
        showAutocompleteOnFocus: true
    });
    jQuery.ui.autocomplete.prototype._resizeMenu = function () {
        var ul = this.menu.element;
        ul.outerWidth(this.element.outerWidth());
    }
</script>

希望有人可以看看这个，看看我如何配置它。

Answer 1

这对我有用:

el.tokenfield({
    autocomplete: {
        source: data,
        minLength: minLength,
        delay: delay,
        open: function (event, ui) {

            // make width of dropdown equals to width of input field
            var _openDD = $("ul.ui-autocomplete.ui-widget-content:visible");
            var _width = $(this).parent().width();

            _openDD.width(_width);
        }
    },
    delimiter: c_delimiter
});