Heim > Artikel > Web-Frontend > Wie kann ich mithilfe der Datenlisten- und Eingabelistenattribute von HTML ein durchsuchbares Auswahlfeld erstellen?
Erstellen eines Auswahlfelds mit erweiterter Benutzereingabe
Benutzer bevorzugen oft die Bequemlichkeit eines Auswahlfelds gegenüber der manuellen Texteingabe, aber manchmal gibt es eine Bedarf an einer vielseitigeren Eingabemöglichkeit. Durch die Einführung eines Auswahlfelds mit integrierter Suchfunktion können Benutzer mühelos das gewünschte Element finden.
Die Nutzung von HTMLs
Ein einfacher Ansatz zum Erreichen dieser Funktionalität nutzt HTMLs
<code class="html"><input list="brow"> <datalist id="brow"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist></code>
In diesem Code ist der Das Element gibt „brow“ als zugehörige
Suchfunktionalität
Die Magie geschieht, wenn der Benutzer mit der Eingabe in das Eingabefeld beginnt. Der Browser filtert automatisch die
Styling mit Bootstrap
Während diese Lösung voll funktionsfähig ist, können Sie ihr Erscheinungsbild und Verhalten mit Bootstrap verbessern leistungsstarke CSS-Klassen. Hier ist ein Beispiel:
<code class="html"><div class="form-group"> <label for="browser">Browser:</label> <input list="brow" class="form-control" id="browser"> </div> <datalist id="brow"> ... </datalist></code>
Durch Umschließen des und
Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe der Datenlisten- und Eingabelistenattribute von HTML ein durchsuchbares Auswahlfeld erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!