AutoComplete

TIP

• The Autocomplete Module is used to provide suggestions while typing into an input field.

• Based on jQueryUI AutoComplete.

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

Example with Demo-Content

.c-input.-has-autocomplete

Floating Label

Show Code

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

$('.c-input.-autocomplete').autocomplete({
  autoFocus: true,
  source: [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ]
});

Plausi AutoComplete

.c-input.-old.-autocomplete

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

TIP

Initialize AutoComplete JS:
Autcomplete.init(settings: object);

(Currently it only sets the correct width of the autocomplete dropdown. Refactoring?)