9.0 - Form - autocompleter

Located in wyrm_core/_autocompleter.sass. Autocompleters traditionally have three states, empty, single item and multi-item addition. Examples for all three are shown below.

<div class="wy-control-group">
  <label for="right-label" >Empty state</label>
  <div class="wy-control">
    <div class="wy-tag-input-group">
      <div class="wy-autocomplete-group">
        <label class="fa fa-search" for="search-example-1"></label> <input type="text" id="search-example-1" placeholder="Search users">
      </div>
    </div>
    <span class="wy-form-message">Example help text</span>
  </div>
</div>
<div class="wy-control-group">
  <label for="right-label" >One item allowed</label>
  <div class="wy-control">
    <div class="wy-tag-input-group">
      <span class="wy-tag">Network<a href="" class="wy-tag-remove"></a></span>
    </div>
    <span class="wy-form-message">User needs to close the above item before choosing a replacement.</span>
  </div>
</div>
<div class="wy-control-group">
  <label for="right-label" >Multiple items allowed</label>
  <div class="wy-control">
    <div class="wy-tag-input-group">
      <span class="wy-tag">Network<a href="" class="wy-tag-remove"></a></span>
      <span class="wy-tag">Rollerball<a href="" class="wy-tag-remove"></a></span>
      <span class="wy-tag on">Being There<a href="" class="wy-tag-remove"></a></span>
      <div class="wy-autocomplete-group">
        <label class="fa fa-search" for="search-example-2"></label> <input type="text" id="search-example-2" placeholder="Search users">
        <div class="wy-autocomplete-dropdown">
          <ul>
            <li class="on">
              Network
            </li>
            <li>
              Rollerball
            </li>
            <li>
              Being There
            </li>
            <li class="add">
              <span class="fa fa-plus-circle"></span> Add new entry
            </li>
          </ul>
        </div>
      </div>
    </div>
    <span class="wy-form-message">Infinite autocomplete.</span>
  </div>
</div>

9.2 - Form - Autocompleter, many items.

For when there are lots of items in a tag group.

<div class="wy-control-group wy-control-group-relation">
  <label>Lots of items</label>
  <div class="wy-control">
    <div class="wy-tag-input-group wy-tag-input-group-many">
    <ol>
      <li><span class="fa fa-ellipsis-v">Network <a class="fa fa-times-circle"></a></span></li>
      <li><span class="fa fa-ellipsis-v">Rollerball <a class="fa fa-times-circle"></a></span></li>
      <li><span class="fa fa-ellipsis-v">The Godfather <a class="fa fa-times-circle"></a></span></li>
      <li><span class="fa fa-ellipsis-v">The Godfather Part II<a class="fa fa-times-circle"></a></span></li>
      <li><span class="fa fa-ellipsis-v">The Big Lebowski <a class="fa fa-times-circle"></a></span></li>
      <li><span class="fa fa-ellipsis-v">Fargo <a class="fa fa-times-circle"></a></span></li>
      <li><span class="fa fa-ellipsis-v">Bad Santa <a class="fa fa-times-circle"></a></span></li>
    </ol>
    <div class="wy-autocomplete-group">
      <label class="fa fa-search"></label>
      <input placeholder="Add item" type="text">
    </div>
  </div>
</div>
  • Default styling without modifier classes.

    1. Network
    2. Rollerball
    3. The Godfather
    4. The Godfather Part II
    5. The Big Lebowski
    6. Fargo
    7. Bad Santa