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

Question

我正在使用带有自定义autocomplete样式的jquery-ui的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-height css属性设置为文本框或消息框。