suchen
HeimWeb-FrontendCSS-TutorialWie erstelle ich ein durchsuchbares Auswahlfeld mit HTML und Bootstrap?

How to Create a Searchable Select Box with HTML and 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!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Zufällige Notizen aus einem Jamstack -RoundtableZufällige Notizen aus einem Jamstack -RoundtableApr 16, 2025 am 11:19 AM

Ich habe am vergangenen Wochenende eine Jamstack Roundtable -Diskussion bei Web Unleashed veranstaltet. Nur ein paar zufällige Notizen aus dieser Erfahrung.

Verwenden von GitHub-Vorlagen-Repos, um statische Site-Projekte zu springenVerwenden von GitHub-Vorlagen-Repos, um statische Site-Projekte zu springenApr 16, 2025 am 11:14 AM

Wenn Sie mit statischen Site -Generatoren beginnen

Statisch zuerst: Vorgenerierte Jamstack-Websites mit serverlosen Rendering als FallbackStatisch zuerst: Vorgenerierte Jamstack-Websites mit serverlosen Rendering als FallbackApr 16, 2025 am 11:06 AM

Möglicherweise sehen Sie den Begriff Jamstack immer häufiger auf. Ich bin seit einiger Zeit ein Fan davon als Ansatz.

CSS-Tricks Chronicle XXXVICSS-Tricks Chronicle XXXVIApr 16, 2025 am 10:58 AM

Dies ist eine dieser kleinen Roundups von Dingen, die mit mir selbst, dieser Seite und den anderen Websites, die Teil der CSS-Tricks-Familie sind, vor sich gehen.

Wöchentliche Plattformnachrichten: Emoji -String -Länge, Probleme mit abgerundeten Tasten, gebündelten BörsenWöchentliche Plattformnachrichten: Emoji -String -Länge, Probleme mit abgerundeten Tasten, gebündelten BörsenApr 16, 2025 am 10:46 AM

In der Roundup in dieser Woche ist die Saitenlänge von zwei Emojis nicht immer gleich, etwas zu berücksichtigen, bevor wir diesen abgerundeten Knopf machen, und wir haben möglicherweise eine neue

Treffen Sie GraphQL bei einem CocktailmixerTreffen Sie GraphQL bei einem CocktailmixerApr 16, 2025 am 10:43 AM

GraphQL und Rest sind zwei Spezifikationen, die beim Erstellen von APIs für Websites verwendet werden. Rest definiert eine Reihe von einzigartigen Kennungen (URLs), die Anwendungen verwenden

Einführung von Sass -ModulenEinführung von Sass -ModulenApr 16, 2025 am 10:42 AM

Sass hat gerade eine wichtige neue Funktion gestartet, die Sie möglicherweise aus anderen Sprachen erkennen: ein Modulsystem. Dies ist ein großer Schritt nach vorne für @import. einer der am häufigsten verwendeten

Wie ich gelernt habe, mich nicht mehr Sorgen zu machen und Git -Haken zu liebenWie ich gelernt habe, mich nicht mehr Sorgen zu machen und Git -Haken zu liebenApr 16, 2025 am 10:41 AM

Die Verdienste von Git als Versionskontrollsystem sind schwer zu bestreiten, aber während Git hervorragende Arbeit leisten wird

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat -Befehle und wie man sie benutzt
4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

SAP NetWeaver Server-Adapter für Eclipse

SAP NetWeaver Server-Adapter für Eclipse

Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

EditPlus chinesische Crack-Version

EditPlus chinesische Crack-Version

Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion

MinGW – Minimalistisches GNU für Windows

MinGW – Minimalistisches GNU für Windows

Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.