HTML5 datalist giriş değerinin değiştirilmesi

<input type="text" list="numbers"> 

<datalist id="numbers"> 
    <option value="110"> 
    <option value="111"> 
    <option value="112"> 
    <option value="113"> 
    <option value="114"> 
    <option value="115"> 
</datalist>

http://jsfiddle.net/shvPB/HTML5 datalist giriş değerinin değiştirilmesi

Senaryo:
1. Kullanıcı değeri seçeneklerinden herhangi birini yazmak YA aşağı/yukarı ok başlar ve açılır liste seçeneğini öneriyoruz.
2. Kullanıcı seçeneklerinden birine fare çubuklarını veya parmak boşluklarını ve önemli: o hala listede yukarı/aşağı kaydırabilir.
3. Kullanıcı giriş alanının dışına tıklar. Giriş alanı artık odakta değil.
4. Kullanıcı, seçimini ve giriş alanındaki tıklamaları değiştirmek istemektedir, ancak seçenekler artık görünmemektedir.

Seçenekleri 4. adımda nasıl gösterebilirim?

kaynak

2013-08-27 Fellow Stranger

Datalistleri programatik olarak etkinleştirebileceğinizi sanmıyorum. Bkz. Http://stackoverflow.com/questions/16133661/programmatically-make-datalist-of-inputtype-url-appear-with-javascript –

Açmak için bir seçim etiketini zorlayamazsınız. – j08691

@ j08691 lütfen tahminlerinizle insanları karıştırmayın lütfen JS ile açık seçim yapın ve burada çözülebilir: http://stackoverflow.com/questions/10453393/how-to-open-the-select-input-using-jquery ... bu aynı zamanda datalist için de çalışabilir (ya da olmayabilir) yaklaşımını gösterir (veri, datalist için bir çözüm değil ...) –

Bu, belirli bir çözümdür ancak (jQuery kullanarak) ... ihtiyaçlarınız için çalışması gerekir ...:

Özeti: Kendi seçmek benzeri eleman olun, ona <datalist> değerleri kopyalayın. Ardından, girişe 2 olay bağlayın: odakta/saklandığında göster/gizle. Ve girdiye tıkla() üzerindeki bir değeri iletmek için her seçenek benzeri öğeye olay ekleyin. <datalist>'un açılır kapanmayacağı zaman görünecek bir kayıt elemanı olacaktır. Tek bir zor şey var - kaybolma işlemi setTimeout tarafından yapıldı, çünkü odaklanma (bulanıklaştırma) olayı tıklama olayından daha çabuk ateşlenir ...

Fiddle şu ana kadar oluşturuldu: http://jsfiddle.net/xPx2Z/3/ :)/* chrome look-a-like dropdown */

BTW: Eğer <select> açıldı ve hala girişi focus() ed bir <select> eleman ile böylece çözüm iyi değil olmak "doğru" olması olamaz. Bu yüzden cevabı biraz güncelledim :)

kaynak

2013-08-28 10:03:59

@greg cevap, "bir otomatik tamamlama işlevidir, yalnızca listenizdeki öğelerin geçerli değerin ne ile eşleşeceğini gösterir. Eğer kullanıcı 11 girdiyse, tüm seçenekleriniz eşleşir ve Eğer kullanıcı 110'a girerse, sadece 110 tane eşleşecek ve sadece 110 tane görüntülenecektir.Kullanıcının tüm listeyi tekrar görüntülemek için girişi temizlemesi gerekiyor. "" onclick'e değer veren bir js fonksiyonu da çalışacaktır. " – Ajay2707

HTML5 datalist giriş değerinin değiştirilmesi

cevap

İlgili konular