2

在这里使用代码：http: //jqueryui.com/autocomplete/#combobox 但是用类替换 id 几乎可以实现所需的功能......除了所有组合框只有下拉按钮。如何为每个组合框获取下拉按钮？                   

<div class="ui-widget" style="display: inline-block;" >
  <select id="tag01" class="comboBox">
    <option value="">Select one...</option>
      <c:forEach items="${allTags}" var="tag">
        <option value="${tag.title}">${tag.title}</option>
      </c:forEach>
   </select>
</div>
<div class="ui-widget" style="display: inline-block;" >
  <select id="tag02" class="comboBox">
    <option value="">Select one...</option>
    <c:forEach items="${allTags}" var="tag">
      <option value="${tag.title}">${tag.title}</option>
    </c:forEach>
  </select>
</div>

然后像这样调用comboxbox：

 $("#tag01").combobox();
 $("#tag02").combobox();

或者

 $(".comboBox").combobox();

结果只有一个下拉按钮。只有当我从 div 样式中删除显示内联块时，我才会获得多个按钮，但是组合框在多行上 - 我不想要这个。

4

1 回答 1

1

下拉按钮是绝对定位的，这意味着它不会影响页面的正常流动。当您添加第二个组合框时，position: relative容器元素中的与组合会导致堆叠在按钮顶部的框。在元素的右侧留出一些空间.ui-widget可以解决问题。

例如，

<div class="ui-widget" style="display: inline-block; margin-right:40px">
  <select id="tag01" class="comboBox">
    ...
   </select>
</div>

有关演示，请参见http://jsfiddle.net/YH3ep/3/

于 2013-01-05T15:53:02.517 回答