Phoenix Reisen Styleguide

450 #permalink Fuzzy-Suche

Module: Mithril

Ein Suchfeld, das während des Tippens bereits Suchergebnisse anzeigt - auch Autocomplete genannt.

Wird innerhalb von .fuzzy-overlay ein <div class="fuzzy-bg-layer"></div> gesetzt, wird ein unsichtbares div über den body aufgezogen, welches für ein onclick genutzt werden kann, um das Ergebnis-Overlay bei einem Klick irgendwo ins Fenster wieder zu schließen.

Möchte man bestehendes Aussehen des Overlays ändern, überschreibt man am Besten .fuzzy-style.

Source: src/components/_fuzzy.scss, line 1

450.1 #permalink Reines Textfeld ohne Button

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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="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>
        </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 19

450.2 #permalink Textfeld mit Button

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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 &#123;&#123;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