PatternLab (0.1.259)

# Search

TIP

See Forms for JavaScript Settings and API.

.c-float-container.-input.-has-btn > input.js-search

hide code 
<div class="c-float-container -input -has-btn">
    <label class="c-label" for="search-input">Nach Produkt suchen ...</label>
    <input type="text" class="c-input -icon js-search" data-placeholder="Nach Produkt suchen ..." id="search-input" name="search" value="" />
    <button type="submit" class="c-btn -square-btn -primary -input" title="Suchen">
        <span class="fa fa-search"></span>
    </button>
</div>

# Activate Search-Button on Typing

TIP

Add the data-min-amount attribute to activate the button when the user inserts a minimum amount of characters. The minimum amount is defined via the extra attribute data-min-amount="5".

.c-float-container.-has-input.-has-btn[data-activate-btn][data-min-amount="5]
> .c-input + .c-btn.-icon-btn.-square.-input[disabled]

hide code 
<div class="c-float-container -has-input -has-btn" data-activate-btn data-min-amount="5">
    <label class="c-label" for="input-button-disabled">Nach Produkt suchen ...</label>
    <input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-button-disabled" name="" value="" />
     <button type="submit" disabled class="c-btn -square-btn -primary -input js-tooltip" title="Suchen">
        <span class="fa fa-search"></span>
    </button>
</div>

# Search with Clear-Button

Type text into the field and delete it with the "X"-Button.

.c-float-container.-input.-has-btn.-has-icon > button.js-search-clear

hide code 
<div class="c-float-container -input -has-btn -has-icon">
    <button type="button" class="c-float-container__icon -clear js-search-clear" aria-controls="search-input">
        <span class="far fa-times"></span>
    </button>
    <label class="c-label" for="search-input">Nach Produkt suchen ...</label>
    <input type="text" class="c-input -icon js-search" data-placeholder="Nach Produkt suchen ..." id="search-input" name="search" value="" />
    <button type="submit" 
    class="c-btn -square-btn -primary -input" title="Suchen">
        <span class="fa fa-search"></span>
    </button>
</div>

← Tab →