Properties panelinden aşağıdaki ayarları yapılandırabilirsiniz:
Options: Liste içinde gösterilecek verinin bağlantısını yapabilirsiniz. Statik bir liste de oluşturabilirsiniz.
Fixed Options List: Veri tabanına bağlı olmadan manuel olarak tanımlanan sabit verileri listeler.
Fixed Data: Listeyi oluşturan her bir verinin görünen ismini (Text) ve uygulama içinde kullanılacak değerini (Key) belirler.
Placeholder: Kullanıcının veri girmediğinde görüntülenen yer tutucu metindir.
Allow Clear: Sağ kenarda bir Sil (X) simgesi ekleyerek girilen verinin tek tıklamayla silinmesini sağlar.
Value: Statik bir değer ekleyebilir veya Symbol Picker aracılığıyla başka bir elementin içeriğini ya da aksiyon sonucunu dinamik olarak gösterebilirsiniz.
Elemente Eklenebilen Aksiyonlar
Auto Complete elementi, kullanıcı etkileşimlerine bağlı olarak olay (event) bazlı aksiyonlar tanımlanmasını destekler. Aksiyonlar, elementin kendisine değil; kullanıcı girişleri ve seçimleri sonucunda tetiklenen event’lere bağlanır.
Auto Complete elementi için aksiyonlar, Properties > Add Action alanı üzerinden aşağıdaki event’ler aracılığıyla eklenebilir.
Desteklenen Aksiyon Tetikleyicileri
onSearch: Kullanıcı arama yaptığında tetiklenir. Arama metni temizlendiğinde (clear) de çalışır.
Kullanım amaçları:
Girilen metne göre öneri listesini dinamik olarak oluşturmak
API çağrısı yaparak sonuçları filtrelemek
Büyük veri setlerinde arama performansını artırmak
Örnek senaryo: Kullanıcı şehir ismi yazdıkça, API üzerinden eşleşen şehirler liste halinde getirilir.
onSelect: Kullanıcı her seçim yaptığında tetiklenir.
Kullanım amaçları:
Seçilen değeri state veya değişkene atamak
Bağlı alanları otomatik doldurmak
Form verisini güncellemek
Örnek senaryo: Kullanıcı bir ürünü seçtiğinde, ürün detayları otomatik olarak ilgili alanlara yazılır.
onChange: Yalnızca seçilen item değiştiğinde tetiklenir.
Kullanım amaçları:
Kullanıcı girişini izlemek
Yardımcı metin veya uyarı göstermek
Bağımlı alanların durumunu güncellemek
onBlur: Kullanıcı Auto Complete alanından odak çıktığında tetiklenir.
Kullanım amaçları:
Alan boş bırakıldıysa validasyon çalıştırmak
Girilen değerin geçerli olup olmadığını kontrol etmek
getTextFromValue: Seçilen değerden gösterilecek metni elde etmek için kullanılır.
Kullanım amaçları:
Value–Label ayrımı olan veri yapılarında doğru metni göstermek
API’den gelen karmaşık veri yapılarında kullanıcıya anlamlı etiket sunmak
Örnek senaryo: Value olarak user_id, metin olarak Ad Soyad bilgisinin gösterilmesi.
Aksiyonlara İlişkin Temel Kurallar
Auto Complete elementi birden fazla event üzerinden aksiyon tetikleyebilir.
Aynı event için birden fazla aksiyon tanımlanabilir.
onSearch event’i yoğun kullanıldığında performans açısından API çağrıları dikkatli planlanmalıdır.
Karmaşık veri eşleştirme senaryolarında onSelect ve getTextFromValue birlikte kullanılması önerilir.
Auto Complete elementi, özellikle arama, filtreleme ve büyük veri setleriyle seçim yapılan senaryolarda aksiyonlarla birlikte kullanıldığında güçlü ve esnek bir kullanıcı deneyimi sunar.
