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-height CSS属性的文本框或消息框。