Anında Aranabilir Bir Veri Ajanı Nasıl Oluşturulur
Açılır listeler, uygun bir yoldur. seçenekler sağlama Bir giriş alanı için, özellikle mevcut seçenekler listesi uzun olduğunda. Bir kullanıcı istediği seçeneği seçebilir alana yazarak, veya seçeneklere göz atın aradıkları şey için bir eşleşme olabilir. Seçenekler arasında arama yapabilme, Ancak, ideal bir çözümdür.
Bu davranış ile elde edilebilir HTML elemanı bu giriş önerilerini görüntüler Gibi farklı kontroller
etiket. ancak
yalnızca kullanıcının uygun zaten bir şey yazdın giriş alanına.
Kullanıcıları etkinleştirebiliyorsak giriş alanını daha kullanışlı hale getirebiliriz. tüm seçenek listesine eriş Giriş alma işlemi sırasında herhangi bir zamanda.
Bu yazıda, nasıl oluşturulacağını göreceğiz herhangi bir zamanda aranabilen açılır liste kullanmak ve
HTML elemanları ve küçük bir JavaScript.
1. Seçenekli bir Veri Ajanı oluşturun
İlk önce, farklı metin editörleri için bir veri yazarı oluştururuz. Değerinin olduğundan emin olun. liste
özniteliği etiket aynıdır
İD
arasında tag - bu onları birbirimize nasıl bağladığımızdır.
2. Veri Listesini Görünür Yap
Varsayılan olarak, HTML elemanı gizli. Bunu yalnızca biz görebiliyoruz. bir giriş yazmaya başla alana, veri uzmanına bağlı.
Ancak, datalistin içeriğini "zorlamak" için bir yol vardır (yani tüm seçenekleri) web sayfasında görünmek. Biz sadece uygun vermek gerekir Görüntüle
mülk değeri ondan başka Yok
, Örneğin Ekran bloğu;
.
datalist display: block;
Görüntülenen seçenekler henüz seçilemez Bu noktada, yalnızca tarayıcı seçenekleri sunar datalistin içinde bulur.
Daha önce de belirtildiği gibi, eleman, seçeneklerin bir kısmı zaten görünür ve seçilebilir, ancak yalnızca kullanıcı tarayıcının yapabileceği bir dize yazmaya başladığında eşleşen bir seçenek bul.
Ayrıca yapmak için bir mekanizma bulmamız gerekiyor. herşey seçenekler (açılır menü listesinin altında görüntülenen yukarıdaki ekran görüntüsünde) seçilebilir en Giriş alma sürecinin herhangi bir diğer noktası - Kullanıcılar herhangi bir şey yazmadan önce veya giriş alanına önceden bir şeyler almışken seçenekleri kontrol etmek istediklerinde.
3. getir
HTML Öğesi
Kullanıcıları etkinleştirmenin iki yolu vardır. tüm seçenekleri gör ve seç ne zaman isterlerse:
- Ekleyebiliriz olay işleyicisini tıklatın Her seçeneğe gidin ve tıklandığında bir seçenek seçmek için kullanın, ya da dönüştürmek Seçenekler gerçek bir açılır listeye, varsayılan olarak seçilebilir olan.
- Yapabiliriz seçenekleri kaydır Veri uzmanı ile
HTML elemanı.
İkinci yöntemi seçeceğiz, çünkü daha basit ve kullanımına izin verildi geri dönüş mekanizması olarak desteklemeyen tarayıcılarda öğesi. Bir tarayıcı veriyi görüntüleyemiyor ve görüntüleyemiyorsa, işler
tüm seçenekleriyle eleman yerine.
Varsayılan olarak, seçmek
öğe, tarihçiyi destekleyen tarayıcılarda görünmüyor, yani biz Veri uzmanını içeriğini oluşturmaya zorla ile Ekran bloğu;
CSS kuralı.
Ne zaman biz seçenekleri kaydır yukarıdaki örnekten (burada datalist’in bulunduğu Ekran bloğu
) ile HTML etiketi, kod aşağıdaki gibi görünüyor:
için tüm seçenekleri görün arasında seçmek
açılır listede özellikleri kullanmamız gerekiyor çoklu
birden fazla seçenek göstermek boyut
göstermek istediğimiz seçenek sayısı için.
4. Bir Geçiş Düğmesi Ekleme
Tam açılır listenin görünmesi gerekiyordu sadece ne zaman kullanıcı bir geçiş düğmesine tıklar Giriş alanının yanında, kullanıcı yazarken çalışma çalışanı gösterilir. Haydi değiştir Görüntüle
datalistin değeri için Yok
, ve ayrıca düğme ekle giriş alanının yanında Görüntüle
Veri uzmanının değeri ve sonuç olarak seçmek
.
datalist görüntüleme: yok;
HTML dosyasında datalistin üstüne şu düğmeyi de eklememiz gerekir:
Şimdi JavaScript'i görelim. İlk önce ilk değişkenler.
button = document.querySelector ('button'); datalist = document.querySelector ('datalist'); select = document.querySelector ('select'); options = select.options;
Sonra, ihtiyacımız var etkinlik dinleyicisi ekle (toggle_ddl
) düğmenin click olayı için Veri uzmanının görünümünü değiştir.
button.addEventListener ('klik', toggle_ddl);
Sonra, tanımlarız. toggle_ddl ()
işlevi. Bunu yapmak için ihtiyacımız var değerini kontrol et datalist.style.display
özellik. Boş bir dizge ise, datalist gizlenir, bu yüzden ihtiyacımız var. değerini blok
, ve ayrıca düğmesini değiştir aşağı dönük bir oktan yukarı dönük bir oktan.
fonksiyonu toggle_ddl () / * eğer DDL gizliyse * / if (datalist.style.display === ") / * DDL’yi gösterin * / datalist.style.display = 'block'; this.textContent =" âÂ-² "; else hide_select (); function hide_select () / * hide DDL * / datalist.style.display ="; button.textContent = "âA-A¼";
hide_select ()
fonksiyon Veri uzmanını gizler ayarlayarak datalist.style.display
özelliği boş bir dizeye geri dönebilir ve düğme okunu aşağıya doğru işaret edecek şekilde değiştirme.
Son kurulumda, giriş alanları daha önce seçilen bir seçeneğe sahipse ve açılan liste daha sonra bir düğme tıklamasıyla da tetiklendiyse, önceden belirlenmiş seçenek seçili olarak gösterilmesi gerekiyor açılan listede.
Öyleyse, aşağıdaki işaretlenmiş kodu ekleyelim. toggle_ddl ()
fonksiyon:
fonksiyonu toggle_ddl () / * eğer DDL gizliyse * / if (datalist.style.display === ") / * DDL’yi gösterin * / datalist.style.display = 'block'; this.textContent =" âÂ-² "; var val = input.value; (var i = 0; iAyrıca, kullanıcı giriş alanına yazarken açılır listeyi gizlemek istiyoruz (çalışan veri yazarı göründüğü sırada).
/ * kullanıcı metin alanına yazmak istediğinde, DDL * / input = document.querySelector ('input'); input.addEventListener ('focus', hide_select);5. Bir Seçenek Seçildiğinde Girişi Güncelle
Sonunda hadi ekle
değişiklik
olay işleyicisi -eetiketi, böylece kullanıcı açılır listeden bir seçenek seçtiğinde değeri cihazın içinde görüntülenir.
alan.
/ * kullanıcı DDL'den bir seçenek seçtiğinde, bunu * / select.addEventListener metin alanına yazın ('change', fill_input); function fill_input () input.value = options [this.selectedIndex] .value; hide_select ();Dezavantajları
Bu tekniğin ana dezavantajı stil vermek için doğrudan bir yolun olmaması
eleman CSS ile (görünüm
ve
etiketler farklı tarayıcılara göre değişir).
Ayrıca, Firefox’ta giriş metni, içeren Giriş karakterleri, diğer tarayıcılar ise ile başlar bu karakterler Datalist için W3C belirtimi açıkça eşleşmenin nasıl yapılması gerektiğini belirtmez.
Bunun dışında, bu yöntem iyidir ve tüm büyük tarayıcılarda çalışır, Çalışmayabileceği tarayıcılarda kullanıcılar açılan listeyi hala görebilirler, yalnızca öneriler görünmez.
Aşağıdaki demoyu biraz CSS stiliyle izleyin: