JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="contact_name" name="contact_name" class="required" placeholder="Contact Name" />
<input type="text" id="contact_email" name="contact_email" class="required" placeholder="Contact Email" />

JavaScript

$(document).ready(function(){
			var data = [{"label":"Paul","value":"email@hello.com"},{"label":"Dave","value":"support@domain.com"}];
			$("#contact_name").autocomplete({
				source:data,
				
				change: function(e, ui) {
					if (ui.item === null) {
						alert("Contact Does Not Exist.\n\nCheck the box below to add the entered details as a new contact of this company");
						
						$("#AddAsContact").css('display', 'block');
						$("#AddAsContactLabel").css('display', 'block');
					 }
				  },
				  select: function(e, ui) {
					  e.preventDefault() // <--- Prevent the value from being inserted.
					  $("#contact_email").val(ui.item.value);
					  $(this).val(ui.item.label);
					  
					  $("#AddAsContact").css('display', 'none');
					  $("#AddAsContactLabel").css('display', 'none');
					  $('#AddAsContact').prop('checked', false);
				  }
			});
		});