Examples
Default styling
.fuzzy-show-result
wenn gesetzt, wird das Ergebnis-Overlay angezeigt, ansonsten nicht.
Markup
<div class="container" style="height: 250px"> <!-- Nur zu Demozwecken. Kann weg. -->
<article class="fuzzy-search [modifier class]">
<div class="fuzzy-with-button">
<label class="textfield fuzzy-input">
<input
value="Toller Hund, der {{und"
type="text"
name="fuzzy"
maxlength="100"
readonly="false"
id="fuzzy-input"
placeholder="..."
autocomplete="autocomplete"
oninput="(e) => console.log('fuzzied')"
/>
<span class="textfield__label">
Suche
</span>
</label>
<button type="button" class="btn btn--secondary"
onclick="alert('clicked')">
<i class="fas fa-list"></i>
</button>
</div>
<div class="fuzzy-overlay fuzzy-result fuzzy-style">
<div class="fadeIn animated faster">
<a id="fuzzy-item-0" href="javascript:"
onclick="alert('Hund')">
Hund
</a>
<a id="fuzzy-item-1" href="javascript:"
onclick="alert('Kunde')">
Kunde
</a>
<a id="fuzzy-item-2" href="javascript:"
onclick="alert('Schlund')">
Schlund
</a>
<a id="fuzzy-item-3" href="javascript:"
onclick="alert('Wunde')">
Wunde
</a>
</div>
</div>
<!-- zu Demozwecken auskommentiert
<div class="fuzzy-bg-layer" onclick="alert('close')"></div>
-->
</article>
</div>
Source:
src/components/_fuzzy.scss
, line 76