JQuery UI ile otomatik tamamlama

İnternette bu işlevselliği sitemize eklememize izin veren birçok eklenti var, ancak bunlar bizim bilmediğimiz bir programlama şeması altında geliştirildi ve daha sonra bunların değiştirilmesi ve uygulanması genellikle biraz sıkıcı ve karmaşık. Ama o zamandan beri her şey kaybolmadı jQuery ve kütüphanelerin uzantısı jQuery kullanıcı arayüzü bize, sitemizde otomatik tamamlama işlevini çok fazla baş ağrısı olmadan uygulamak için bazı yöntemler getiriyorlar.
Bir örneğe geçmeden önce, otomatik tamamlama yöntemini ve nasıl çalıştığını görelim.
Otomatik tamamlama () yöntemi
yöntem otomatik tamamlama iki şekilde kullanılabilir:

$ (seçici, bağlam) .autocomplete (seçenekler) $ (seçici, bağlam) .autocomplete ("eylem", parametreler)

Bu yöntem, bir HTML'nin bir öneri listesi görüntüleyen bir alan olarak yönetilmesi gerektiğini bildirir, seçenekler, kullanıcının alana yazmaya başladığı andaki bu listenin davranışını belirtir.
Metin alanına girilen karakterlerden kaynak seçeneklerinde yer alan değerlerle karşılaştırma yapılır.
Daha iyi görmek için pratik bir örnek görelim:
1- İlk önce gerekli dosyaları ekliyoruz:

2- Otomatik tamamlama için mevcut öneriler listesi olacak kelimeleri içeren bir değişken oluşturuyoruz, öneri listesi ayrıca bir JSON ve hatta bir XML, hatta ajax ekleyerek işlevselliği biraz genişletiyoruz, ancak bu örnekte işleri karmaşıklaştırmamak için bir değişken kullanacağız:

varavailableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C ++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy "," Haskell "," Java "," Javascript "," Lisp "," Perl "," PHP "," Python "," Ruby "," Scala "," Şema "];

3- Metodu çağırırız, seçiciyi onunla ilişkilendiririz ve ona bir seçenek olarak parametreyi veririz. kaynak Öneri listesini nereden alacağınızı size bildirir:

 $ ("#tags") .autocomplete ({source:availableTags}); 

4- HTML'mizde bitirmek için birotomatik tamamlamayı uygulayan girdimizi içerecek:

Etiketler:

Uygulamadan sonra şöyle bir şey olmalı:

Son olarak, çeşitli geçerli kaynaklardan gelen öneriler listemizi doldurabileceğimizi ve bileşenimizin işlevselliğini artıracak farklı seçenekler ve olaylar uygulayabileceğimizi unutmadan, kendiniz test edebilmeniz için size tam kodu bırakacağım.

 jQuery UI Otomatik Tamamlama - Varsayılan işlevsellikEtiketler:

Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.