Jquery 使用文本框将引导下拉列表调整为内容宽度

我已经附加了一个与引导下拉小提琴。下拉列表顶部有输入文本。 如何调整文本框和下拉框的宽度以适应内容大小？例如，我有一个很长的文本“沥青铺筑机looooong”。内容不应换行

当然，必须有一个最大宽度

<div class="editableDropdown input-group">
<input type="text" class="col-md-3 gui-input" name="load" id="load"/>
<div style="display:inline-block; width:10px">
    <button type="button" class="btn btn-default dropdown-toggle"
        data-toggle="dropdown" style="width:20px">
        <span class="glyphicon glyphicon-menu-up"></span><span
            class="glyphicon glyphicon-menu-down"></span>
    </button>
    <ul id="color-dropdown-menu"
        class="dropdown-menu dropdown-menu-right scrollable-menu" role="menu">
        <li>Select / Enter Load</li>
        <li>ARTICULATED DUMP TRUCK</li>
   </ul>
</div>

选择/输入加载
铰接式自卸汽车

它认为“选择”组件可以解决您的问题

  <select>
  <option>ASPHALT MILL</option>
  <option> ASPHALT LAY DOWN MACHINE "LOOOOOOOOOOOOOONG" </option>
  </select>

沥青磨
沥青摊铺机“Looooong”

当我查看您的JSFIDLE时，我无法在下拉列表中选择任何选项。这是故意的吗？对不起，我没有在

选项中包含ng click。单击将根据选择填充文本框。是否有方法将其包括在内？回答一个有可用小提琴的问题通常比较容易。修改小提琴这对你有帮助吗？不，我不能使用select。我需要在顶部的文本框，用户可以输入，而不是只读选择。