Kuika’nın Auto Complete elementi, kullanıcıların metin girişi sırasında otomatik öneriler almasını sağlar. Kullanıcı yazmaya başladığında, önceden tanımlanmış veya dinamik olarak getirilen bir veri listesinden uygun seçenekler sunulur. Bu özellik, hem kullanıcı deneyimini artırır hem de veri giriş hatalarını azaltır.

Auto Complete elementi hem web hem de mobil uygulamalarda kullanılabilir.

Kullanım Alanları

• Kayıt veya ödeme formlarında kayıtlı bilgileri hızlı seçme
• Arama kutularında dinamik öneriler sunma
• Adres, şehir, ülke gibi listeleri filtreleme
• Daha önce kaydedilmiş kart, hesap veya kullanıcı verilerini listeleme

Kullanım Senaryosu – Kayıtlı Kart Seçimi

Bir etkinlik bileti satın alma uygulamasında kullanıcı, ödeme adımına geldiğinde kayıtlı kartlarından birini seçer. Bu işlem için sayfaya bir Auto Complete elementi eklenmiştir.

Senaryoda:

• Kullanıcı Music Fest 2024 etkinliği için ödeme sayfasına gelir.
• “Select Registered Card” alanına tıkladığında kayıtlı kart seçenekleri (ör. MasterCard, Visa, Amex) açılır.
• Kullanıcı yazmaya başladığında, uygun kart isimleri filtrelenir.
• Seçim yapıldığında kart bilgisi ödeme işlemine otomatik olarak bağlanır.

Veri Kaynağı Bağlama

1. Datasources Modülü

• Datasources modülüne gidin.
• Ardından Tables başlığı yanındaki + ikonuna tıklayın ve tabloya “CardsData” ismini verin. 
• Aşağıdaki tabloyu oluşturun. 

• Yeni bir SQL Action oluşturun, adına CardsData yazın:

SELECT 1 AS Id, 'MasterCard' AS CardNameUNION ALLSELECT 2, 'Visa'UNION ALLSELECT 3, 'American Express';

UI Design Modülü İşlemleri

1. UI Design modülüne gidin.
2. Elements > Select Input kategorisinden Auto Complete elementini sürükleyip bırakın.

1. Placeholder → “Choose or type your card”
2. Options → CardsData SQL Action’ı seçin.
3. Allow Clear: Aktif edilirse, kullanıcı seçimini tek tıklamayla temizleyebilir.
4. Value: Seçilen kart bilgisi, ödeme aksiyonuna dinamik olarak aktarılabilir.

Özelliklerin Senaryo Bağlamında Kullanılması

• Options: Kayıtlı kartların listesi CardsData SQL Action’dan dinamik olarak yüklenir.
• Placeholder: “Choose or type your card” ifadesi kullanıcıya rehberlik eder.
• Allow Clear: Kullanıcının seçimi kolayca sıfırlamasını sağlar.
• Value: Seçilen kart bilgisi ödeme formuna aktarılır.
• Fixed Options List (alternatif): Veri tabanına bağlanmadan manuel seçenek listesi tanımlanabilir.

Senaryo Tamamlandığında

• Kullanıcı Select Registered Card alanına tıkladığında kayıtlı kart listesi açılır.
• Kart adının ilk harflerini yazdığında öneri listesi otomatik olarak filtrelenir.
• “MasterCard” seçildiğinde değer ödeme formuna işlenir.
• Kullanıcı isterse X simgesine tıklayarak seçimi temizleyebilir.

Kısıtlamalar

• Dinamik veri bağlantısı yapılacaksa Options alanına SQL Action bağlanmalıdır.
• Çok fazla kayıt olması durumunda liste performansı etkilenebilir.
• Placeholder metni boş bırakılırsa kullanıcı ne girmesi gerektiğini anlayamayabilir.

İpuçları ve Best Practices

• Kullanıcıya net rehberlik sağlayacak placeholder metinleri kullanın.
• Sık kullanılan seçenekleri listenin üst kısmında sıralayın.
• Eğer veri küçük ve sabitse, Fixed Options List özelliğiyle manuel liste tanımlayın.
• Arama performansı için sadece gerekli alanları sorgulayın.