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 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 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 HTML etiketi, kod aşağıdaki gibi görünüyor:

İle birlikte datalist Ekleme çoklu özniteliği etiketi, 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