<form>

  <input list="jobs" placeholder="Select Job" required>
  <datalist id="jobs">
    <option data-value="42">42 Web</option>
    <option data-value="43">43 Print</option>
  </datalist>

  <input list="codes" placeholder="Select Code" required="data-value">
  <datalist id="codes">
    <option data-value="PM">Project Management</option>
    <option data-value="COPY">Copy</option>
  </datalist>

  <input type="text" placeholder="Note" required>
  <input type="submit" value="Submit" id="submit">

</form>

body {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 300;
  font-size: 18px;
}

input[type="text"],
input[list] {
  color: #f0f0f0;
  font-size: 18px;
  padding: 10px;
  max-height: 56px;
  width: 350px;
  background: #555;
  -webkit-appearance: none;
  appearance: none;
  border: none;
}

#submit {
  color: #f0f0f0;
  font-size: 18px;
  padding: 10px;
  max-height: 56px;
  width: 370px;
  background: #555;
  -webkit-appearance: none;
  appearance: none;
  border: none;
}

// routine taken from here: https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/

// Find all inputs on the DOM which are bound to a datalist via their list attribute.
var inputs = document.querySelectorAll("input[list]");
for (var i = 0; i < inputs.length; i++) {
  // When the value of the input changes…
  inputs[i].addEventListener("change", function () {
    console.log("changed");
    var optionFound = false,
      datalist = this.list;
    // Determine whether an option exists with the current value of the input.
    for (var j = 0; j < datalist.options.length; j++) {
      if (this.value == datalist.options[j].value) {
        optionFound = true;
        break;
      }
    }
    // use the setCustomValidity function of the Validation API
    // to provide an user feedback if the value does not exist in the datalist
    if (optionFound) {
      this.setCustomValidity("");
    } else {
      this.setCustomValidity("Please select a valid value.");
    }
  });
}