Wie kann ich mithilfe der Datenlisten- und Eingabelistenattribute von HTML ein durchsuchbares Auswahlfeld erstellen?-CSS-Tutorial-php.cn

Wie kann ich mithilfe der Datenlisten- und Eingabelistenattribute von HTML ein durchsuchbares Auswahlfeld erstellen?

Linda Hamilton

Freigeben： 2024-10-31 09:48:29

Original

688 Leute haben es durchsucht

How can I create a searchable select box using HTML's datalist and input list attributes?

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 und Attribute

Ein einfacher Ansatz zum Erreichen dieser Funktionalität nutzt HTMLs und Attribute. So funktioniert es:

<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>

Nach dem Login kopieren

In diesem Code ist der Das Element gibt „brow“ als zugehörige an. Der enthält

Suchfunktionalität

Die Magie geschieht, wenn der Benutzer mit der Eingabe in das Eingabefeld beginnt. Der Browser filtert automatisch die Elemente basierend auf der Eingabe und zeigen nur relevante Optionen an. Dies sorgt für ein nahtloses und intuitives Sucherlebnis innerhalb des Auswahlfelds.

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>

Nach dem Login kopieren

Durch Umschließen des und Elemente in einer Durch das Hinzufügen der Klasse „form-control“ verleihen Sie dem Auswahlfeld ein zusammenhängendes und modernes Erscheinungsbild, das zum Stil von Bootstrap passt.

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!