2013-01-17 12 views
11

Ogólnie uważam, że nowy <datalist> jest bardzo przydatny, ale uważam, że sugestie nie są wystarczająco widoczne. Czy istnieje sposób wyzwalania wyświetlania propozycji datalist przy użyciu javascript?Jak wyświetlać sugestie dotyczące danych przy użyciu javascript?

Jako przykład mam dane na temat <input type="number"> (jsFiddle).

<label> 
    Enter a Fibonacci number: 
    <input type="number" list="fibonacci" min="0" id="myinput"> 
</label> 
<datalist id="fibonacci"> 
    <option value="0"> 
    <option value="1"> 
    <option value="2"> 
    <option value="3"> 
    <option value="5"> 
    <option value="8"> 
    <option value="13"> 
    <option value="21"> 
</datalist> 
<button type="button" id="show-suggestions">Show suggestions</button> 

<script> 
$('#show-suggestions').click(function() { 
    // .showSuggestions() does not exist. 
    // I'd like it to display the suggested values for the input field. 
    $('#myinput').showSuggestions(); 
}); 
</script> 

W Chrome, pełna lista propozycji jest widoczna tylko wtedy, gdy wejście jest pusty, ma już skoncentrować, a następnie użytkownik kliknie na wejściu. Strzałka w dół nie pokazuje sugestii - po prostu zmniejsza wartość.

Chciałbym, aby sugestie były bardziej widoczne. Jako przykład dodałem przycisk, który powinien otworzyć listę sugestii. Co umieszczam w module obsługi onClick?

Użyłem Chrome, jQuery i wprowadzania liczbowego w tym przykładzie, ale wolałbym ogólne rozwiązanie niezależne od tych wszystkich.

Odpowiedz

1

Po usunięciu typu = "liczba" użytkownicy mogą uzyskać listę rozwijaną za pomocą podstawowego skrótu klawiszowego alt + downarrow.

Jeśli to nie działa. Sugeruję użycie podejścia hybrydowego, takiego jak https://github.com/mmurph211/Autocomplete

Powiązane problemy