Zmiana wartości wejściowe w HTML5 datalist

<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/Zmiana wartości wejściowe w HTML5 datalist

Scenariusz:
1. Użytkownik zaczyna pisać jedną z opcji wartość lub strzałka w dół/w górę, a lista rozwijana sugerują opcje.
2. Przyciski myszy użytkownika lub enterliksy na jednej z opcji i ważne: wciąż może przewijać listę w górę/w dół.
3. Użytkownik klika poza polem wprowadzania. Pole wprowadzania nie jest już aktywne.
4. Użytkownik chce zmienić swój wybór i klika pole wprowadzania, ale opcje nie są już widoczne.

Jak mogę wyświetlić opcje również w kroku 4?

Źródło

2013-08-27 Fellow Stranger

Nie sądzę, że można programowo aktywować bazę danych. Zobacz http://stackoverflow.com/questions/16133661/programmatically-make-datalist-of-inputtype-url-appear-with-javascript –

Nie można w taki sam sposób, jak nie można wymusić otwarcia znacznika select. – j08691

@ j08691 proszę nie mylić ludzi z domysłów otwarte wybierz z JS faktycznie można zrobić i został rozwiązany tutaj: http://stackoverflow.com/questions/10453393/how-to-open-the-select-input-using-jquery ... to również pokazuje podejście, które może (lub nie musi) działać również dla danych (podejście, nie jest rozwiązaniem dla danych ...) –

Jest to szczególna rozwiązanie, ale powinno działać dla swoich potrzeb ... (jQuery) ...:

Podsumowanie: Należy wybrać swój własny element podobny, kopiowanie wartości z <datalist> do niego. Następnie wiąż 2 zdarzenia do wprowadzenia: pokaż/ukryj przy fokusie/rozmyciu. I dodaj zdarzenie do każdego elementu podobnego do opcji, aby przekazać wartość click() do wprowadzenia. Będzie to element oszczędnościowy, który będzie widoczny, kiedy nie pojawi się lista rozwijana <datalist>. Jest jedna trudna sprawa - zniknięcie jest wykonywane przez setTimeout, ponieważ zdarzenie focusout (blur) jest uruchamiane wcześniej niż zdarzenie click ...

Fiddle utworzone do tej pory: http://jsfiddle.net/xPx2Z/3/ :)/* wyskakujące okno w stylu chrome */

BTW: nie można mieć „prawdziwy” <select> otwarty i nadal być focus() ed na wejściu, więc rozwiązanie z elementem <select> nie jest dobre. Więc zaktualizowałem odpowiedź nieco :)

Źródło

2013-08-28 10:03:59

@greg odpowiedź zastąp w komentarzu, "jest funkcją autouzupełniania, wyświetla tylko pozycje z listy, które pasują do aktualnej wartości. Jeśli użytkownik wprowadził 11, wszystkie opcje pasują do siebie i wszystkie zostaną wyświetlone, jeśli użytkownik wprowadził 110, wyświetliło się tylko 110 dopasowań i tylko 110. użytkownik musi wyczyścić dane wejściowe, aby wyświetlić pełną listę, a funkcja js, która ustawia wartość na "" onclick również będzie działać. " – Ajay2707

Zmiana wartości wejściowe w HTML5 datalist

Odpowiedz

Powiązane problemy