Ihr habt das sicher schon bei verschiedenen Formulare gesehen. Ihr habt ein Input Feld und wenn ihr was tippt, dann habt ihr bereits eine Liste wo ihr euer Suchbegriff auswählen könnt. Ihr dachtet jetzt sicher, das ist extrem kompliziertes Zeug dahinter, aber da irrt ihr euch. So ein Suchfeld mit einer Auswahlliste ist nämlich reines HTML und heute zeige ich euch wie ihr das selbst verwenden könnt.

Video

HTML

1
2
3
4
5
6
7
8

 <datalist id="stadt">
      <option value="Bern"></option>
      <option value="St. Gallen"></option>
      <option value="Luzern"></option>
      <option value="Basel"></option>
      <option value="Genf"></option>
    </datalist>
    <input list="stadt" type="search" placeholder="suche nach stadt" />

CSS

1
2
3
4
5

datalist {
        position: absolute;
        max-height: 20em;
        border: 0 none;
      }