Autocomplete

The Autocomplete Component is used to provide suggestions while typing into an input field and is based on jQueryUI AutoComplete.

Example

.c-input.js-autocomplete

• Test: Type "A" into the input field.

Floating Label

Show Code

<div class="c-float-container -has-icon">
  <div class="c-float-container__icon">
    <span class="far fa-search" aria-hidden="true"></span>
  </div>
  <label class="c-label" for="input2">Floating Label</label>
  <input type="text" class="c-input js-autocomplete" data-placeholder="Nach Programmiersprache suchen ..." id="input2" name="" value="" />
</div>

Initialization

$('.js-autocomplete').autocomplete({
  autoFocus: true,
  source: [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C"
  ]
});

Plausi AutoComplete

.js-autocomplete

<label class="c-label -old" for="input3"></label>
<input type="text" class="c-input -old js-autocomplete2 -test" data-placeholder="type something.. " id="input3" name="" value="" />