Wie erstelle ich ein durchsuchbares Auswahlfeld mit HTML und Bootstrap?

Erstellen eines erweiterten Auswahlfelds mit Suchfunktion

Die Erweiterung des herkömmlichen Auswahlfelds um eine Suchfunktion kann die Benutzererfahrung und die Effizienz der Dateneingabe erheblich verbessern . Hier ist eine Lösung, die HTML und Bootstrap verwendet, um dies zu erreichen.

Implementierung:

Die Implementierung umfasst das Erstellen eines Formulars mit einem Textfeld und einem Auswahlfeld wie folgt:

<code class="html"><form>
  <input type="text" list="brow" placeholder="Search...">
  <datalist id="brow">
    <option value="Internet Explorer"></option>
    <option value="Firefox"></option>
    <option value="Chrome"></option>
  </datalist>

  <select>
    <option value="ie">Internet Explorer</option>
    <option value="ff">Firefox</option>
    <option value="cr">Chrome</option>
  </select>
</form></code>

• Textfeld: Das Textfeld mit dem Listenattribut ermöglicht Benutzern die Eingabe der Eingabe und zeigt passende Optionen aus der Datenliste an.
• Datenliste: Die Datenliste definiert die Liste der vordefinierten Optionen für das Suchfeld.
• Auswahlfeld: Das Auswahlfeld bietet eine herkömmliche Optionsauswahl, die auch basierend auf aktualisiert werden kann die Sucheingabe.

Anpassung:

Bootstrap bietet eine Vielzahl von Klassen, um das Erscheinungsbild des Textfelds und des Auswahlfelds anzupassen, z. B. das Hinzufügen von Eingabegruppen oder Styling für verschiedene Komponenten. Das folgende CSS fügt beispielsweise ein Suchsymbol zum Textfeld hinzu:

<code class="css">input[list] {
  padding-right: 30px;
}

input[list]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  background: url(search.png) no-repeat;
  background-size: contain;
}</code>

Fazit:

Durch die Kombination von HTML, Bootstrap und einem einfachen Code-Snippet, Wir können ein hochfunktionales Auswahlfeld mit Suchfunktion erstellen. Diese Lösung bietet eine bequemere und benutzerfreundlichere Möglichkeit zur Dateneingabe und ist daher besonders nützlich für lange oder komplexe Listen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein durchsuchbares Auswahlfeld mit HTML und Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!