Search Bar Filter

Die search_bar Komponente stellt ein Texteingabefeld mit einer Absenden-Schaltfläche für Suchanfragen bereit. Sie unterstützt sowohl eine herkömmliche Formularübermittlung als auch eine HTMX-basierte Suche.

WCAG AA
WCAG AAA
HTMX

Funktionen

  • HTMX-Integration: Suchergebnisse werden ohne Seitenneuladen geladen.

  • Clientseitige Suche: Optionale Fuse.js-Integration für die Suche in der Dokumentation.

  • Kompaktmodus: Vereinfachtes Design mit geringerem Platzbedarf.

  • Pre-filled query: Initial search term can be set.

HTML

Verwendung

Die Komponente wird über das search_bar Tag eingebunden.

{% load insight_tags %} {% search_bar request_url="/search/" simple=True search_query="Test 123" %}

Parameter

Laden…

config (SearchBarConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
request_url str

URL für den Formular-Request. Nicht zusammen mit htmx_config verwenden; stattdessen htmx_config.request_url für HTMX-Anfragen verwenden.

 "" False
simple bool

Wenn „True“, wird ein kompakter/minimalistischer Stil dargestellt.

 False False
search_query str

Wert der ursprünglichen Suchanfrage.

 "" False
placeholder str

Platzhaltertext für das Sucheingabefeld.

 "" False
button_label str

Beschriftung für die Suchschaltfläche.

 "" False
htmx_config

HTMX-Konfiguration für AJAX-Anfragen.

 None False
enable_search bool

Wenn True, wird die clientseitige Suche in der Dokumentation mit Fuse.js aktiviert.

 False False
search_index_url str

Optionale URL für den Suchindex der clientseitigen Dokumentationssuche.

 "" False
SearchBarConfig( request_url="/search_products/", placeholder="Search products...", button_label="Find", simple=False, )

Barrierefreiheit

WCAG AA WCAG AAA
Status

WCAG AA (Grundlagen)

  • Das Formularelement verfügt über die Eigenschaft role='search' für die Orientierungsnavigation.

  • Das Suchfeld verwendet type='search' zur Vermittlung der semantischen Bedeutung und zur Browseroptimierung.

  • Ein visuell ausgeblendetes <label> mit dem Attribut sr-only ist über for/id mit dem Eingabefeld verknüpft.

  • Das Suchsymbol dient lediglich dekorativen Zwecken und wird vor assistiven Technologien versteckt.

  • Der „Absenden“ Button ist bei Anzeige mit einer beschreibenden Beschriftung versehen.

Verwandte Themen