Pazar 26 Mart 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. Arayüz
  3. Flexdatalist – Datalist Destekli Otomatik Tamamlama Eklentisi
 Flexdatalist – Datalist Destekli Otomatik Tamamlama Eklentisi
Arayüz JavaScript

Flexdatalist – Datalist Destekli Otomatik Tamamlama Eklentisi

Yazar : Bilal UÇAR 1 Aralık 2017 0 Comment

HTML5 datalist öğesi modern front-end geliştirmede oldukça yararlıdır. Ancak, pek çok geliştiricinin bilmediği unsurlardan biridir.

HTML5 ‘in bu özelliği input bir alana kelime girilmesiyle çalışır. Ancak Flexdatalist gibi bir eklenti ile çalışmak daha kolaydır. Daha geniş bir tarayıcı serisini destekler ve işvereninizin tasarımını tam olarak özelleştirmenizi sağlar.

Herkesin otomatik tamamlama özelliklerine ihtiyacı olmayabilir ve yerel HTML5 veri listeleri ile bir eklenti ile uğraşmak zorunda kalmazsınız.

Bununla birlikte, Flexdatalist belki de en iyi olanıdır, işte bazı avantajları:

  • Mobil yanıt desteği
  • Her bir öğe için ek açıklamalar
  • Birden fazla seçime yönelik seçenekler aynı anda

Tümü jQuery tarafından desteklenmektedir, bu nedenle bu işlemi çalıştırmak için en son sürümün bir kopyasına ihtiyacınız olacaktır. Aynı zamanda, HTTP isteklerini azaltmak için tek bir CSS dosyasına birleştirmek isteyebileceğiniz kendi CSS stil şablonuyla birlikte gelir.

Temel demo sayfasında, Flexdatalist dosyalarına indirme bağlantılarını içeren tam kurulum talimatlarını bulabilirsiniz.

Tek bir JavaScript dizesiyle kurulumu gerçekten basittir. Eklenti varsayılan olarak .flexdatalist sınıfıyla çalışır. Dolayısıyla bunu kodunuza eklemeniz sonuçları görmek için yeterlidir.

Sadece datalist öğesini input alanınıza ekleyin ve geri kalanını Flexdatalist ‘e bırakın. İsteğe bağlı açıklayıcı metin de dahil olmak üzere, listeyi otomatik olarak biçimlendirir.

İlave metin eklemek için en basit yol, bir veri özniteliği aracılığıyla girdinize ekleyebileceğiniz bir JSON dosyasıdır.

Örneğin, Flexdatalist demo sayfasını kontrol ederseniz, data = countries.json nitelikli bir “Ülke” girişi alanı bulacaksınız. Bu, tüm ham giriş verilerini harici olarak depolayan uzak bir dosyaya referans verir.

Bu alanların çok fazlası, sayfayı biraz yavaşlatabilir. Bunu da söylemeden geçmeyelim. Ancak bu işi gören birçok eklentiden daha hızlı olduğunu söyleyebilirim.

Başlamak için GitHub repo‘yu ziyaret etmeniz ve bir kopyasını indirmeniz yeterlidir. Bu, kurulum, JavaScript seçenekleri ve dolaşım için bol miktarda örnek kod parçacıkları için eksiksiz belgeler içeren ana demo sayfasına bir bağlantı da içerir.

Bu makalede veri girişleri için otomatik öneri sunan, web geliştiricilerin çok seveceği Flexdatalist jQuery eklentisinden bahsettik. Siz de düşüncelerinizi yorum yaparak bizlerle paylaşabilirsiniz.

Etiketler: flexdatalist html5 datalist otomatik öneri jquery otomatik tamamlama javascript
Önceki Yazı
Sonraki Yazı

Bilal UÇAR (Website)

administrator

Front-end Developer @Webmaster.Kitchen. Front-end developer olarak çalışıyorum. Bu konuda öğrendiklerimi sizlerle paylaşmaya çalışıyorum. Siz de yaptığınız çalışmaları, edindiğiniz bilgileri paylaşabilirsiniz. Yorum alanı ile mutfağa katkıda bulunun.

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.