Bootstrap 3 Autocomplete Ekleme

Bootstrap 3’e Otomatik Tamamlama Ekleme

Bootstrap 3, web geliştirme için güçlü ve popüler bir çerçevedir. Otomatik tamamlama özelliği, kullanıcıların form alanlarına metin girerken öneriler almalarını sağlayarak kullanıcı deneyimini iyileştirebilir. Bu makalede, Bootstrap 3’e otomatik tamamlama özelliği nasıl ekleneceği adım adım anlatılacaktır.

Adım 1: Gerekli Bağımlılıkları Ekleyin

Otomatik tamamlama özelliğini etkinleştirmek için aşağıdaki bağımlılıkları sayfanıza eklemeniz gerekir:

  • jQuery (v1.11.1 veya üzeri)
  • Bootstrap (v3.3.7 veya üzeri)
  • Bootstrap Otomatik Tamamlama Eklentisi (v1.0.5 veya üzeri)

Bu bağımlılıkları aşağıdaki CDN’lerden ekleyebilirsiniz:

“`html



“`

Adım 2: Otomatik Tamamlama Verilerini Hazırlayın

Otomatik tamamlama özelliği, bir veri kaynağına dayanır. Bu veri kaynağı, bir dizi metin dizesi veya bir JSON nesnesi olabilir. Örneğin, aşağıdaki JSON nesnesi, ülkelerin bir listesini içerir:

json
{
"ülkeler": [
"Türkiye",
"Amerika Birleşik Devletleri",
"Birleşik Krallık",
"Almanya",
"Fransa"
]
}

Adım 3: Otomatik Tamamlama Alanını Oluşturun

Otomatik tamamlama alanını oluşturmak için aşağıdaki HTML kodunu kullanın:

html
<input type="text" class="form-control" id="ülke" placeholder="Ülke Girin">

Adım 4: Otomatik Tamamlama Eklentisini Başlatın

Otomatik tamamlama eklentisini başlatmak için aşağıdaki JavaScript kodunu kullanın:

javascript
$('#ülke').autocomplete({
source: ülkeler,
minLength: 2
});

Bu kod, #ülke kimliğine sahip girdi alanına otomatik tamamlama özelliğini uygular. source seçeneği, otomatik tamamlama verilerinin kaynağını belirtir. minLength seçeneği, kullanıcı en az 2 karakter girene kadar önerilerin gösterilmeyeceğini belirtir.

İsteğe Bağlı: Önerileri Özelleştirin

Otomatik tamamlama önerilerini daha da özelleştirmek için aşağıdaki seçenekleri kullanabilirsiniz:

  • renderItem: Önerilerin nasıl görüntülendiğini özelleştirir.
  • onSelect: Bir öneri seçildiğinde tetiklenen bir olay işleyicisi.
  • delay: Önerilerin kullanıcı yazmayı bıraktıktan sonra kaç milisaniye sonra gösterileceğini belirtir.

Faydalı Kaynaklar

Sonuç

Bootstrap 3’e otomatik tamamlama özelliği eklemek, kullanıcı deneyimini iyileştirmenin kolay ve etkili bir yoludur. Bu makalede açıklanan adımları izleyerek, web uygulamalarınıza kolayca otomatik tamamlama işlevselliği ekleyebilirsiniz.

Yayımlandı

kategorisi