8 Beispiele für Perfect React-Suchkomponenten

Blog

8 Beispiele für Perfect React-Suchkomponenten

1.Suchfeld reagieren

Eine elegante Suchfeldkomponente für React.
Suchfeld reagieren



Sehen Demo und Dokumentation.

Auf GitHub anzeigen: https://github.com/nutboltu/react-search-field



2.Reagieren Sie die Suche

React-Search ist eine einfache Autovervollständigungskomponente für die Suche, die React.js verwendet.

.Reagieren-Suche



Auf GitHub ansehen

3.Such-Benutzeroberfläche

Bibliotheken für die schnelle Entwicklung moderner, ansprechender Sucherlebnisse.

Eine React-Bibliothek, mit der Sie Sucherlebnisse schnell implementieren können, ohne das Rad neu erfinden zu müssen.

php mit Schlüssel aus dem Array entfernen

Verwenden Sie es mit Elastic App Search oder Elastic Site Search, um eine Sucherfahrung in wenigen Minuten einzurichten.

Such-UI

Merkmale

  • Wissen Sie, für die Suche - Verwaltet von Elastic, dem Team hinter Elasticsearch.
  • Schnelle Implementierung - Erstellen Sie mit wenigen Codezeilen ein vollständiges Sucherlebnis.
  • Anpassbar - Stimmen Sie die Komponenten, Markup, Stile und Verhaltensweisen nach Ihren Wünschen ab.
  • Intelligente URLs – Suchen, Paging, Filtern und mehr werden in der URL erfasst, um eine direkte Ergebnisverknüpfung zu ermöglichen.
  • Headless - Nutzen Sie unsere Anwendungslogik, stellen Sie Ihre eigenen Komponenten oder Ansichten bereit.
  • Flexibles Frontend - Nicht nur für React. Verwenden Sie es mit jeder JavaScript-Bibliothek, sogar mit Vanille-JavaScript.
  • Flexibles Backend – Nicht nur für Elastic App Search. Verwenden Sie mit jedem Back-End.

Besuche die Live-Demo der Suchbenutzeroberfläche.

Auf GitHub ansehen

4.Spresso-Suche

Visuelle Metasuchmaschine mit React, Redux, Express und TypeScript. http://spresso-search.herokuapp.com/

Schnellsuche

Die Spresso-Suche kratzt Suchergebnisse von Google mithilfe der Knoten-Röntgenbibliothek und verwendet dieselbe Bibliothek, um Metainformationen auf Webseiten zu erhalten (Vorschaubilder, Favicons). Es gibt eine Screenshot-Funktion, die Screenshots von Websites erstellt, deren HTML keine Meta-Vorschaubilder enthält.

Es gibt auch eine Textumriss-Funktion, die von node-unfluff betrieben wird und Textinhalte von Webseiten abkratzt (ideal für Artikel und andere textreiche Seiten), sodass der Benutzer den Inhalt einer Webseite in sauberem, formatiertem Text lesen kann und ohne die Presso Search-Site zu verlassen.

Auf GitHub ansehen

Javascript-Json-String zum Array

5.Reagieren Sie auf die Sofortsuche

Blitzschnelle Suche nach React- und React Native-Apps von Algolia. React InstantSearch ist eine React-Bibliothek, mit der Sie mithilfe der Such-API von Algolia ein sofortiges Suchergebniserlebnis erstellen können. Es ist Teil der InstantSearch-Familie:
Sofortsuche reagieren

Wieso den
Sie sollten React InstantSearch verwenden, wenn Sie:

  • Entwerfen Sie Sucherlebnisse mit Best Practices
  • Passen Sie Ihre Komponenten nach Belieben an
  • Folgen Sie den React-Prinzipien

Auf GitHub ansehen

6.Reaktive Suche

Eine React- und React Native UI-Komponentenbibliothek für Elasticsearch
Lesen Sie, wie Sie eine Benutzeroberfläche für die E-Commerce-Suche erstellen
Reaktive Suche

Merkmale

Entwurf

  • Das Sensor-/Aktor-Designmuster ermöglicht die Erstellung komplexer UIs, in denen eine beliebige Anzahl von Sensoren verkettet werden kann, um einen Aktor (oder sogar mehrere Aktoren) reaktiv zu aktualisieren.
  • Die Bibliothek übernimmt die Transformation der UI-Interaktionen in Datenbankabfragen. Sie müssen nur die Komponenten einschließen und jede mit einem DB-Feld verknüpfen.
  • Integrierte Live-Updates - Aktoren können so eingestellt werden, dass sie die Ergebnisse aktualisieren, selbst wenn sich die zugrunde liegenden Daten in der DB ändern.
  • Kommt mit Scoped und gestylten Komponenten. Erfordert keinen externen CSS-Bibliotheksimport, wird mit className- und innerClass-Unterstützung geliefert.
  • Ist über ThemeProvider themenfähig.

Benutzerfreundlichkeit

  • Installation in einem Schritt mit npm i @appbaseio/reactivesearch,
  • Ein UMD-Build, der direkt im Browser funktioniert. Installationsschritte hier,
  • gestylte und bereichsbezogene Komponenten, die leicht erweitert werden können,
  • Siehe die Starter-App für die reaktive Suche.

Auf GitHub ansehen

7.Reagieren Sie die Suchleiste

Diese Bibliothek befindet sich nicht mehr in aktiver Entwicklung. Mach damit wie du willst. Wenn Sie nach einer Alternative suchen, verwenden Sie stattdessen bitte das hervorragende WAI-ARIA-konforme Reagieren-Autosuggest.

Eine in React integrierte Suchleiste für allgemeine Zwecke.

git src refspec stimmt mit keiner überein

Suchleiste reagieren

Live-Demo
https://vakhtang.github.io/react-search-bar/

Auf GitHub ansehen

8.Reagieren Sie JS-Suche json

suche json mit react.js.

#reactjs #javascript #programmierung