# Autocomplete

TIP

Based on jQueryUI Autocomplete (opens new window).
Test: Type "A" into the input field.

# Example with Demo-Content

.c-input.-has-autocomplete

Floating Label

hide 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"
     ]
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# Plausi Autocomplete

.c-input.-old.-autocomplete

hide code

<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?)

← Accordion Collapse →