fuelux/reference/dist/templates/underscore/fuelux/input-with-combobox.html

Base Fuel UX styles and controls

<!-- Input With Combobox http://getfuelux.com/javascript.html#combobox -->
<div class="form-group<% if(horizontal && inputsize.length > 0) {%> form-group-<%= inputsize %><% } %><% if(validation) {%> has-<%= validation %><% } %><% if(required) {%> required<% } %>">
  <label class="control-label<% if(horizontal) { %> col-sm-2<% } %>" for="<%= id %>Input"><%= label %></label>
  <% if(horizontal) {%><div class="col-sm-10"><% } %>
    <div class="input-group <% if(placement=="appended") { %>input-append<% } else { %>input-prepend<% } %> dropdown combobox<% if(inputsize.length > 0) {%> input-group-<%= inputsize %><% } %>" data-initialize="combobox" id="<%= id %>">
      <% if(placement=="appended") { %><input id="<%= id %>Input" name="<%= id %>Input" type="<%= inputtype %>" aria-label="" class="form-control<% if(!horizontal && inputsize.length > 0) {%> input-<%= inputsize %><% } %>" placeholder="<%= placeholder %>" <% if(required) {%> required <% } %><% if(readonly) {%> readonly <% } %><% if(isDisabled) {%> disabled <% } %> /><% } %>
      <div class="input-group-btn">
        <button type="button" class="btn <%= buttonstyle %> dropdown-toggle<% if(inputsize.length > 0) {%> btn-<%= inputsize %><% } %>" aria-label="<%= label %> autofill suggestions" data-toggle="dropdown"><span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right" role="menu"><% _.each(buttonoptions, function(value) { %>
          <li data-value="<%= value %>"><a href="#"><%= value %></a></li><% }); %>
        </ul>
      </div>
      <% if(placement=="prepended") { %><input id="<%= id %>Input" name="<%= id %>Input" type="<%= inputtype %>" aria-label="" class="form-control<% if(!horizontal && inputsize.length > 0) {%> input-<%= inputsize %><% } %>" placeholder="<%= placeholder %>"<% if(required) {%> required <% } %><% if(readonly) {%> readonly <% } %><% if(isDisabled) {%> disabled <% } %> /><% } %>
    </div>
    <% if (helptext.length > 0) { %><p class="help-block"><%= helptext %></p><% } %>
  <% if(horizontal) {%></div><% } %>
</div>