HTML Formu: Select-Option ve Datalist-Option karşılaştırması

Select-Option ve Datalist-Option arasındaki farkların ne olduğunu merak ediyordum. Birini veya diğerini kullanmanın daha iyi olacağı bir durum var mı? Her birine bir örnek:

Seç-Seçenek

<select name="browser">
<option value="firefox">Firefox</option>
<option value="ie">IE</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</select>

Datalist-Seçenek

<input type=text list=browsers>
<datalist id=browsers>
  <option value="Firefox">
  <option value="IE">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Bunu bir gereklilik ve öneri arasındaki fark olarak düşünün. İçin selecteleman, kullanıcı Verdiğiniz seçeneklerden birini seçmek için gereklidir. İçin datalisteleman, kullanıcının Verdiğiniz seçeneklerden birini seçmek ileri sürülmektedir ama aslında o girişteki istediği her şeyi girebilirsiniz.

Düzenleme 1: Hangisini kullandığınıza göre gereksinimlerinize bağlı. Kullanıcının seçimlerinizden birini girmesi gerekiyorsaselect öğeyi kullanın . Kullanım herhangi bir şey girebiliyorsa, datalistöğeyi kullanın .

Edit 2: Bu tidbit'i HTML Living Standard'da buldu : "Datalist öğenin torunu olan her seçenek öğesi ... bir öneriyi temsil eder."

Teknik açıdan tamamen farklılar. <datalist>diğer öğeler için seçeneklerin soyut bir kapsayıcıdır. Sizin durumunuzla birlikte <input type="text"kullandığınız halde aralıklar, renkler, tarihler vb. İle de kullanabilirsiniz. Http://demo.agektmr.com/datalist/

Metin girişi ile, otomatik tamamlama türü olarak kullanılıyorsa, soru gerçekten şudur: Serbest biçimli bir metin girişi veya önceden belirlenmiş bir seçenekler listesi kullanmak daha mı iyidir? Bu durumda cevabın biraz daha açık olduğunu düşünüyorum.

<datalist>Bir metin alanı için seçeneklerin bir listesi olarak kullanılmaya odaklanırsak, bu ve bir seçim kutusu arasındaki bazı belirli farklılıklar şunlardır:

• Bir <datalist>beslenen metin kutusu ekran etiket ve göndermek için tek bir dizi bulunur. Bir seçim kutusunun, görüntüleme etiketine göre farklı bir gönderme değeri olabilir <option value='ie'>Internet Explorer</option>.
• Bir <datalist>beslenen metin kutusu desteklemediği <optgroup>ekranı organize etmek etiketi.
• Bir kullanıcıyı, a <datalist>ile yapabileceğiniz benzerler listesiyle sınırlandıramazsınız <select>.
• Onchange olay farklı çalışır. Bir <select>öğe üzerinde, onchange olayı değişiklik üzerine hemen <input type="text"tetiklenirken, öğe ile odak odak kaybolduktan veya kullanıcı enter tuşuna bastıktan sonra tetiklenir.
• <datalist>tarayıcılarda gerçekten sivilceli bir desteği var. Mevcut tüm seçenekleri göstermenin yolu tutarsızdır ve işler oradan daha da kötüleşir.

Son nokta bence gerçekten büyük olan. Daha evrensel bir otomatik tamamlama yedeğine sahip olmanız gerektiğinden, a <datalist>. Artı herhangi terbiyeli otomatik tamamlama pluging stiline yollardan senin seçeneklerin ekran, olanak sağlayacaktır <datalist>yapmaz. İstediğiniz gibi manipüle edebileceğiniz <datalist>kabul edilen <li>öğeler gerçekten harika olurdu! Ama hayır.

Ayrıca anlayabildiğim kadarıyla, <datalist>arama dizenin başından itibaren tam bir eşleşmedir. Eğer olsaydı <option value="internet explorer">ve 'kaşif' için arama yaparsanız sonuç alamazsınız. Çoğu otomatik tamamlama eklentisi metnin herhangi bir yerinde arama yapar.

<datalist>Kullanıcıların en son Chrome veya Firefox'a sahip olduğunu ve sahte değerler göndermeye çalışmadığını% 100 kesin olarak bildiğim bazı dahili sayfalar için hızlı ve tembel bir kolaylık yardımcısı olarak kullandım . Diğer her durumda, <datalist>çok zayıf tarayıcı desteği nedeniyle kullanılmasını önermek zordur .

Datalist, otomatik tamamlama ve önerileri yerel olarak içerir, ayrıca kullanıcının önerilerde tanımlanmayan bir değer girmesine izin verebilir.

Seç yalnızca kullanıcının aralarından seçim yapabileceği önceden tanımlanmış seçenekler sunar

Veri Listesi, HTML5 destekli tarayıcılarda yeni bir HTML etiketidir. Bazı seçenekler listesiyle bir metin kutusu olarak işler. Cinsiyet Metin kutusuna Örnek olarak, Metin Kutusuna 'M' veya 'F' yazdığınızda size Erkek Kadın olarak seçenekler sunar.

<input list="Gender">
<datalist id="Gender">
  <option value="Male">
  <option value="Female> 
</datalist>

"Birini veya diğerini kullanmanın daha iyi olacağı herhangi bir durum var mı?" Yinelenen bölüm çok sayıda selectetiket içeriyorsa , optionher seçim için s, her satır için oluşturulmalıdır.

Böyle bir durumda, datalistile kullanmayı düşünürüm input, çünkü aynı datalistşey herhangi bir sayı için kullanılabilir input. Bu, sunucuda büyük miktarda oluşturma süresi kazandırabilir ve herhangi bir sayıda satıra çok daha iyi ölçeklenebilir.

Datalistte seçilen bir özellik olmadığını fark ettim. Size sadece seçenek sunar, ancak varsayılan bir seçeneği olamaz. Seçilen seçeneği bir sonraki sayfada da gösteremezsiniz.

selectVe arasında başka bir önemli fark vardır datalist. İşte tarayıcı destek faktörü geliyor.

select, datalistlere kıyasla tarayıcılar tarafından yaygın olarak desteklenir. Veri yazarının tam tarayıcı desteği için lütfen bu sayfaya bakın.

Datalist tarayıcı desteği

Seçili olarak tüm tarayıcılarda etkin bir şekilde desteklenir (IE6 +, Firefox 2+, Chrome 1+ vb. Beri)

Seçime benzer, ancak datalist otomatik önerme gibi ek işlevlere sahiptir. Hatta yazarken ve yazarken önerileri bile yazabilir ve görebilirsiniz.

Kullanıcı ayrıca listede olmayan öğeleri de yazabilir.