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!