JSFiddle - React, Tailwind, and code Playground

by Alexis LĂłpez Espinoza

HTML

<form>
	<div>
		<label>Texto:</label>
		<input type="text" id="foo" autofocus />
	</div>
		
	<div>
		<label>Opciones:</label>
		<select id="bar">
			<option value="Juan">Juan</option>
      <option value="Javier">Javier</option>
			<option value="Pedro">Pedro</option>
			<option value="Pablo">Pablo</option>
			<option value="Lorena">Lorena</option>
			<option value="Laura">Laura</option>
		</select>
  </div>
</form>

JavaScript

var seleccion = function(input, select){
	$(input).on("input", function(){
		var palabra = $(this).val().toLowerCase();
		
		$(select).children().each(function(){	
			var opcion = $(this).val().toLowerCase();			
			
			if (opcion.indexOf(palabra) === 0){
				$(this).prop("selected", true);
				return false;
			}
		});
	});
};

seleccion("#foo", "#bar");