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