Autocomplete mit React-Komponenten

8

Ich möchte einen Autosuggest-Workflow wie unten beschrieben. Anstelle der numerischen ID, sagen wir 123 in einem Textfeld, möchte ich benutzerdefinierte Informationen anzeigen.

Während ich den Rest mit React machen kann, muss ich noch automatisch vervollständigen. Ich habe zwei Anforderungen:

  1. Wenn ausgewählt, bieten Sie einen Rückruf mit Rich-Daten {id: 123, title:"Prince Hall", info:"123 Foo St"}
  2. Ein benutzerdefiniertes Rendering, mit dem ich JSX-Vorlagen wiederverwenden kann

JQueryUI und Twitter Autocompletes haben beide Funktionen. Aber ihr Item-Rendering ist string-basiert , aber ich möchte JSX-Templates wiederverwenden, die virtuell-dom-basiert sind. Ich möchte JSX-Vorlagen nicht mit String-Vorlagen duplizieren / kodieren.

    
aitchnyu 04.08.2015, 08:07
quelle

2 Antworten

11

Sehen Sie sich react-select an. Es ist einfach, schön und hat derzeit die meisten Github-Sterne. Live-Demo hier .

    
Erwin Mayer 30.10.2016, 04:28
quelle
4

React-Autosuggest ist eine Komponente, die die Anforderungen erfüllt. Es hat ein benutzerdefiniertes Rendering, das nativ mit React-Elementen funktioniert.

Wir können dafür sorgen, dass JS-Objekte anstelle von einfachen Strings behandelt werden.

  1. Die onSuggestionSelected Requisiten sind ein Callback, um den ausgewählten Vorschlag zu erhalten
  2. suggestionRenderer Methode nimmt Vorschläge und gibt Reaction Markup
    3. zurück

Ссылка

    
aitchnyu 05.08.2015 13:08
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Warum beschwert sich der Compiler, dass f () nicht sichtbar ist?