Jquery-ui 自动完成建议菜单宽度超过较小视口上的输入框

Question

我正在使用 jquery-ui 的 autocomplete 和自定义 bootstrap 样式。

对于所有视口，菜单面板的大小与输入框的大小完全相同，但如果菜单中的字符串更大，那么它就会溢出输入框的大小。

我得到的：

我想要的：

我试过向我的 css 添加宽度属性，但它似乎不起作用。

演示：JSFiddle

Answer 1

像这样添加打开回调函数，jsfiddle

$("#coupon").autocomplete({
    minLength: 1,
    source: coupons,
    focus: function( event, ui ) {
        $("#label").val(ui.item.coupon);
        return false;
    },
    open: function() {
        $("ul.ui-menu").width( $(this).innerWidth() );
    },
    select: function( event, ui ) {
       $("#label").val(ui.item.coupon);
        return false;
    },
    }).autocomplete("instance")._renderItem = function (ul, item) {
         return $("<li>")
             .append(item.label+ '<br><small class="form-text text-muted">' + item.desc+ '</small>')
             .appendTo(ul);
     };
});

Answer 2

首先将min-height或min-heightcss属性设置为文本框或消息框。