A CodePen by Jason Crane. State abbreviations in a datalist - A demo showing state abbreviations in a text field with an associated datalist element, and then validating the entered text based on the datalist.

index.html

<label for="state">State</label><input id="state" type="text" maxlength="2" list="state_abbr" />
<datalist id="state_abbr">
	<option value="AL">
	<option value="AK">
	<option value="AZ">
	<option value="AR">
	<option value="CA">
	<option value="CO">
	<option value="CT">
	<option value="DE">
	<option value="FL">
	<option value="GA">
	<option value="HI">
	<option value="ID">
	<option value="IL">
	<option value="IN">
	<option value="IA">
	<option value="KS">
	<option value="KY">
	<option value="LA">
	<option value="ME">
	<option value="MD">
	<option value="MA">
	<option value="MI">
	<option value="MN">
	<option value="MS">
	<option value="MO">
	<option value="MT">
	<option value="NE">
	<option value="NV">
	<option value="NH">
	<option value="NJ">
	<option value="NM">
	<option value="NY">
	<option value="NC">
	<option value="ND">
	<option value="OH">
	<option value="OK">
	<option value="OR">
	<option value="PA">
	<option value="RI">
	<option value="SC">
	<option value="SD">
	<option value="TN">
	<option value="TX">
	<option value="UT">
	<option value="VT">
	<option value="VA">
	<option value="WA">
	<option value="WV">
	<option value="WI">
	<option value="WY">
</datalist>
<label for="state" class="desc">2-letter postal abbreviation</label>
   <button onclick="validate();">Validate</button>
   <p id="log"></p>

script.js

function validate() {
  var stateInput = document.getElementById('state'),
val = stateInput.value,
      log = document.getElementById('log');
  if (document.querySelectorAll('option[value="' + val + '"]').length) {
    log.innerHTML = val + ' is a state';
   log.className = 'valid';
  }
  else {
    log.innerHTML = val + ' is not a state';
    log.className = 'invalid';
  }
}
document.addEventListener('change','input',function() {validate(); });

style.css

body {
  padding: 1em;
}
label {
  margin-right: 10px;
}
input[type="text"] {
  border: 1px solid #ccc;
  font-size: 1.25em;
  padding: 5px 8px;
  width: 2em;
}
.desc {
  color: #999;
  font-size: .9em;
  font-style: italic;
  margin-left: 10px;
}
button {
  border: 1px solid #ccc;
  background-color: #efefef;
  border-radius: 3px;
  padding: 5px 8px;
}
button:hover {
  background-color: #ddd;
  cursor: pointer;
}
#log {
  color: #fff;
  float:left;
  font-weight: bold;
  padding: 10px;
}
.valid {
  background-color: green;
}
.invalid {
  background-color: red;
}