Only allow valid data from html datalist

validinputfromdatalist.html

//https://stackoverflow.com/questions/30499199/html5-datalist-to-select-only-predefined-options
<script>
function peopleCheck(el)
{
// nothing is done if no value selected - allow empty
	if (el.value == "") return;
	
	var options = el.list.options;
	for (var i = 0; i< options.length; i++) {
	if (el.value == options[i].value)
	//option matches: work is done
		return;
	}	
//no match was found: reset the value	
	el.value = "";
	alert("Does not match to a known person");
	el.focus();
}
</script>
 <div class='iwrap'>
	<label for='ReferredBy'>ReferredBy </label>
	<input type='text' list='people' name="referrer" onblur='peopleCheck(this)'/>
</div>
		
<datalist id='people'>
   <tal:block tal:repeat = "p principals">
   <option value="${p/login}">${p/displayName}</option>
   </tal:block>
</datalist>