2015-08-04 25 views
8

Aşağıdaki gibi otomatik bir iş akışı istiyorum. Sayısal kimliği görüntülemek yerine, bir metin alanında 123 deyin, özel bilgileri göstermek istiyorum. Tepki bileşenleri ile Otomatik Tamamlama

enter image description here

Beraber gerisini mümkün olmakla birlikte

Hala otomatik tamamlama yapmak gerekir, yanıt verin.

seçilen
  1. , zengin veriler içeren bir geri arama sağlamak {id: 123, title:"Prince Hall", info:"123 Foo St"}
  2. beni JSX

jQueryUI ve Twitter autocompletes hem özelliklere sahip şablonları yeniden kullanıma izin veren özel render var: İki gereksinimleri vardır. Ancak, öğe oluşturma işlemi dize tabanlı'dir, ancak sanal dom tabanlı JSX şablonlarını yeniden kullanmak istiyorum. Ben string şablonları ile JSX şablonları çoğaltmak/hardcode yapmak istemiyorum.

+0

Lütfen başladığınız kodu ve nelerin işe yaradığını ekleyebilir misiniz? Yazıldığı gibi, bu soru çok geniştir, sizin için bir bileşen seçmeyi ve ardından kodu yazmayı ister. – WiredPrairie

+0

@WiredPrairie, evet Bu sorunun yanıtlanması, tavsiye sorusu olduğunu hissetmek üzereydim. JqueryUI ve Twitter otomatik tamamlama ile başladım ve onlar özel render, ancak dize şablonları sadece vardı; React'ın sanal dom'unu string render ile kullanmak, ayrılmaz bir problemdi. Bu yüzden React rendering ile iyi oynayabilecek herhangi bir otomatik tamamlama olup olmadığını sordum. Üzgünüm ifadeler çok tembeldi. – aitchnyu

cevap

10

kontrol dışarı biçimlendirme tepki seçilen öneri almak için bir geri arama olduğunu. Basit, güzel ve şu anda en çok Github yıldızı var. Live demo here.

4

React-Autosuggest, gereksinimleri karşılayan bir bileşendir. React elemanları ile doğal olarak çalışan özel bir işleme sahiptir.

Basit dizeler yerine JS nesnelerini işleyebiliriz.

  1. onSuggestionSelected sahne
  2. suggestionRenderer yöntem öneri alır ve döner react-select

http://react-autosuggest.js.org/