<h1>Dropdown with searchable text</h1>
<form>
  <label for="myHouse">Choose your magical house:</label>
  <input list="magicHouses" id="myHouse" name="myHouse" placeholder="type here..." />
  <datalist id="magicHouses">
  <option value="Gryfindor">
  <option value="Hufflepuff">
  <option value="Slytherin">
  <option value="Ravenclaw">
  <option value="Horned Serpent">
  <option value="Thunderbird">
    <option value="Pukwudgie">
  <option value="Wampus">

</datalist>
</form>

/* Only for styling, not required for it to work */
body {
  background-color: lightsteelblue;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
h1 {
  font-family: "Sacramento", cursive;
  font-size: 3rem;
  color: #fff;
  font-family: "Berkshire Swash", cursive;
}

form {
  max-width: 40vw;
  display: flex;
  flex-direction: column;
}

form label {
  font-family: "Open Sans", sans-serif;
  font-size: 1.2rem;
  margin-bottom: 12px;
}

form input {
  border: 2px solid lightslategray;
  height: 40px;
  border-radius: 3px;
  padding: 5px;
  font-size: 1rem;
}

form input:focus {
  outline: none;
  border: 2px solid darkslategray;
}