JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<div class="row">
    <h6 class="action-title">Search Programs:</h6>
    <form name="searchText" id="ProgramSearch" action="http://www.tru.ca/programs.html" method="get"> 
		<input class="radius" type="text" name="q" id="q"  list="programs" placeholder="Search for a program"> <button id="submit_keywords" name="submit_keywords"><i class="fa fa-search"></i></button> 
	
	</form>
</div>
<datalist id="programs">
<option value="Aboriginal Studies">Aboriginal Studies</option>
<option value="Accounting">Accounting</option>
<option value="Accounting Technician">Accounting Technician</option>
<option value="Administrative Assistant">Administrative Assistant</option>
</datalist>

JavaScript

(function(){
var input = document.querySelector('#q');
input.addEventListener('input', onInput);
function onInput() {
    var val = document.getElementById('q').value;
    var opts = document.querySelectorAll('#programs > option');	
  for(var i = 0; i < opts.length; i++){
  	if(opts[i].value === val){
    	console.log('selected!')
    }
  }

}
}())