Filter Dropdown
INFO
Example of a filter dropdown with various filter options and the ability to save and load filters.
- Used in: "Prüfungen: Ausgangsstoffliste"
Show Code
html
<div class="h-border h-border-radius-button h-box-shadow-lg m-y-xl" id="al-filter">
<div class="grid p-x-l p-y-m">
<div class="col-4">
<button type="button" class="c-btn -filter -primarylight -dropdown -redesign js-collapse h-width-100"
role="tab"
data-toggle="collapse" data-target="#al-filter-dropdown"
aria-controls="al-filter">
<span class="fa fa-sliders-h" aria-hidden="true"></span>
<span class="c-btn__text">
Tabelle filtern
</span>
</button>
</div>
<div class="col-8">
<div id="ausgangsstoffliste-table_filter" class="c-float-container -has-input -has-btn -has-icon m-y-reset" data-activate-btn data-min-amount="2">
<button type="button" class="c-float-container__icon -clear js-search-clear" aria-controls="search-input">
<span class="far fa-times" aria-hidden="true"></span>
</button>
<label class="c-label -redesign" for="search-input">Tabelle durchsuchen nach ...</label>
<input type="search" class="c-input -icon js-search js-common-search" aria-controls="ausgangsstoffliste-table" id="search-input" name="search" value="" />
<button type="submit" class="c-btn -square-btn -primary -input -redesign js-filter-load" disabled title="Suchen">
<span class="fa fa-search" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
<div class="c-collapse h-pos-relative h-fullwidth" aria-expanded="false" id="al-filter-dropdown" role="tabpanel">
<div class="h-bg-color p-t-l p-b-xl p-x-l">
<div class="h-flex">
<div class="h-width-50 p-r-m">
<h5>Einträge filtern</h5>
<div class="c-float-container -has-autocomplete -has-icon -light m-t-s">
<div class="c-float-container__icon">
<span class="far fa-search" aria-hidden="true"></span>
</div>
<label class="c-label -redesign" for="al-filter-stoffname">Stoffname</label>
<input type="text" class="c-input -autocomplete -redesign js-stoffname-input" data-placeholder="Nach Stoffname suchen ..." id="al-filter-stoffname" name="" value="" />
</div>
<div class="c-float-container -has-select -light">
<label class="c-label -redesign js-lagerartikel-select" for="lagerartikel">Lagerartikel</label>
<select class="js-select2 c-select -light -redesign js-lagerartikel-select" id="lagerartikel" name="lagerartikel">
<option value="—">Alle Artikel</option>
<option value="1">Nur Lagerartikel</option>
<option value="0">Keine Lagerartikel</option>
</select>
</div>
<div class="c-float-container -has-select -light">
<label class="c-label -redesign js-lager-select" for="lagerort">Lagerorte</label>
<select class="js-select2 c-select -light -redesign js-lagerort-select" id="lagerort" name="lagerort">
<option value="—">—</option>
</select>
</div>
<div class="h-flex c-float-container-group">
<div class="c-float-container -light m-t-reset -has-datepicker -has-icon">
<div class="c-float-container__icon">
<span class="far fa-calendar" aria-hidden="true"></span>
</div>
<label class="c-label -redesign " for="verwendbar-from-date">Verwendbar von...</label>
<input type="text" class="c-input -icon -redesign js-verwendbar js-verwendbar-from-date js-datepicker datepicker" onkeydown="false" id="verwendbar-from-date" name="verwendbar-from-date" value="" />
</div>
<div class="c-float-container -light m-t-reset -has-datepicker">
<label class="c-label -redesign " for="verwendbar-to-date">bis...</label>
<input type="text" class="c-input -icon -redesign js-verwendbar js-verwendbar-to-date js-datepicker datepicker" onkeydown="false" id="verwendbar-to-date" name="verwendbar-to-date" value="" />
</div>
</div>
<div class="h-flex c-float-container-group">
<div class="c-float-container -light m-y-reset -has-datepicker -has-icon">
<div class="c-float-container__icon">
<span class="far fa-calendar" aria-hidden="true"></span>
</div>
<label class="c-label -redesign " for="pruefdatum-from-date">Prüfdatum von...</label>
<input type="text" class="c-input -icon -redesign js-pruefdatum js-pruefdatum-from-date js-datepicker datepicker" onkeydown="false" id="pruefdatum-from-date" name="pruefdatum-from-date" value="" />
</div>
<div class="c-float-container -light m-y-reset -has-datepicker">
<label class="c-label -redesign " for="pruefdatum-to-date">bis...</label>
<input type="text" class="c-input -icon -redesign js-pruefdatum js-pruefdatum-to-date js-datepicker datepicker" onkeydown="false" id="pruefdatum-to-date" name="pruefdatum-to-date" value="" />
</div>
</div>
</div>
<div class="h-width-50 p-l-m h-flex h-flex-column">
<h5>Aktuellen Filter speichern</h5>
<div class="c-float-container -has-input -light -has-btn m-t-s" data-activate-btn data-min-amount="3">
<label class="c-label -redesign" for="al-new-filter-name">Name des Filters</label>
<input type="text" class="c-input -light -icon -redesign js-ausgangsstoffliste-filtername" minlength="3" maxlength="30" data-placeholder="Name eingeben" id="al-new-filter-name" name="" value="" />
<button type="submit"
class="c-btn -square-btn -primary -input -redesign js-tooltip js-filter-save" disabled data-spinner aria-label="Filter speichern">
<span class="fa fa-save" aria-hidden="true"></span>
</button>
</div>
<div class="m-t-auto h-bg-color-white h-border-radius-large p-y-m p-x-m">
<h5 class="m-t-xs">Gespeicherten Filter laden</h5>
<div class="c-float-container -has-icon -has-btn -has-select -is-active m-t-s">
<div class="c-float-container__icon">
<span class="far fa-sliders-h" aria-hidden="true"></span>
</div>
<label class="c-label -redesign" for="al-filter-auswahl">Filter auswählen</label>
<select class="js-select2 c-select -redesign js-saved-filters" id="al-filter-auswahl" name="filter-auswahl">
</select>
<button type="button"
class="c-btn -square-btn -primary -input -redesign js-tooltip js-filter-delete" aria-label="Ausgewählten Filter löschen" data-spinner>
<span class="fa fa-trash" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>