Fuelux

by harsh dand

HTML

<link rel="stylesheet" href="//www.fuelcdn.com/fuelux/3.2.1/css/fuelux.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//www.fuelcdn.com/fuelux/3.2.1/js/fuelux.min.js"></script>
<link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.min.css">
<div class="fuelux">
    <div class="input-group input-append dropdown combobox" data-initialize="combobox" id="myCombobox">
  <input type="text" class="form-control">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
    <ul class="dropdown-menu dropdown-menu-right">
      <li data-value="1"><a href="#">One</a></li>
    </ul>
  </div>
</div>
<div class="pillbox" data-initialize="pillbox" id="myPillbox">
  <ul class="clearfix pill-group">
    <li class="btn btn-default pill" data-value="foo">
      <span>Item Title</span>
      <span class="glyphicon glyphicon-close">
        <span class="sr-only">Remove</span>
      </span>
    </li>
    ....
    <li class="pillbox-input-wrap btn-group">
      <a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a>
      <input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
      <button type="button" class="dropdown-toggle sr-only">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
    </li>
  </ul>
</div>
    <div class="btn-group selectlist" data-resize="auto" data-initialize="selectlist" id="mySelectlist">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
    <span class="selected-label"></span>
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
...