1. Dom
  2. Pytanie i odpowiedź
  3. wielokrotne wybory z datalistą

wielokrotne wybory z datalistą

2013-01-03 11 views
17

Używam tagu do tworzenia listy sugestii dla mojego pola wyszukiwania, ale nie mogę wybrać wielu wartości z bazy danych. Obecnie mój HTML jest:wielokrotne wybory z datalistą

<html> 

    <form action="search_tags.php" method="GET"/> 

    Search: <input type="text" multiple="multiple" name="search" list="tags" autocomplete="off" /> 

    <datalist id="tags"> 
    <option value="black"> 
    <option value="gold"> 
    <option value="grey"> 
    <option value="pink"> 
    <option value="turquoise"> 
    <option value="red"> 
    <option value="white"> 
    </datalist> 

</html>

Zaoferuje propozycje jednej pozycji, ale po tym, że propozycje nie będą sugerować autouzupełniania dla mojej drugiej opcji. Pomyślałem, że tag "wiele" jest wszystkim, czego potrzebuję (i co jest zasugerowane online), ale wydaje się, że nie przynosi pożądanego efektu.

Wszelkie sugestie?

Źródło

2013-01-03 nathan lachenmyer

+1

Według MDN wielokrotność dotyczy tylko typów "e-mail" i "plików". Myślę, że nie masz szczęścia dla tradycyjnego pola tekstowego i może być konieczne użycie czegoś takiego jak select2.js –

+0

To niefortunne :(Czy istnieje jakiś pakiet javascript, który nie używa jquery, które może to zrobić? –

+0

zależą one od biblioteki, ponieważ jest w niej przyzwoita ilość manipulacji DOM, wybrana jest opcja select2 (jQuery) (jQuery lub Prototype), autouzupełnianie jQuery UI (jQuery) .Myślę, że po tym dostaniesz mniej niezawodne rozwiązania. używasz jQuery? –

Odpowiedz

13

Multiple obecnie pracuje tylko z input type = "email" i tylko w Chrome i Opera

spojrzenie na tej minimalistycznej przykład:

<input type="email" list="emails" multiple> 
<datalist id="emails"> 
    <option value="[email protected]"> 
    <option value="[email protected]"> 
    <option value="[email protected]"> 
    <option value="[email protected]"> 
</datalist> 

<input type="text" list="texts" multiple> 
<datalist id="texts"> 
    <option value="black"> 
    <option value="gold"> 
    <option value="grey"> 
    <option value="pink"> 
    <option value="turquoise"> 
    <option value="red"> 
    <option value="white"> 
</datalist>

(http://jsfiddle.net/iiic/t66boyea/1/)

pierwsze wejście będzie działa, drugie NIE. Wystarczy nacisnąć przecinek, a lista wyświetli się tak samo, jak przy kliknięciu na wejście.

Źródło

2014-10-15 09:44:17 iiic

+6

Ktoś wie, dlaczego po prostu 'type =" email "' jest obsługiwane atm? Tak dziwne! –

0

Dostosowane datalist przyjąć wiele wartości:

https://jsfiddle.net/bhbwg0rg/1/

Po każdym naciśnięciu przycisku wejścia , i Spacja)

<label for="authors">Type authors from favorite to least favorite</label> 
<input type="text" list="names-list" id="authors" value="" size="50" name="authors" placeholder="Type author names"> 
<small>You can type how many you want.</small> 
<datalist id="names-list"> 
    <option value="Albert Camus"> 
    <option value="Alexandre Dumas"> 
    <option value="C. S. Lewis"> 
    <option value="Charles Dickens"> 
    <option value="Dante Alighieri"> 
</datalist>

Źródło: https://codepen.io

Źródło

2017-11-10 22:54:22 Neil

Powiązane problemy

 Powiązane problemy