JSFiddle - React, Tailwind, and code Playground

by cwurld

HTML

<form>Type C and press Enter:
    <input id="autocomplete" />
    <input type="submit" value="submit" />
</form>

CSS

#autocomplete {
    padding-right: 15px;
}

JavaScript

function cancelAutocompleteSumbission(e) {
	// Make sure this is a nodeElement and the button pressed was Enter-Return
	if (!this.nodeType || e.which != 13)
		return;

    // Cancel submission if the user clicks Enter at the end of a completed field.
    if (!$(this).autocomplete('widget').is(':visible') && e.which === 13){
        return false;
    }
}
// Making a private scope to avoid naming collision.
$.fn.autocomplete = (function () {
	// Cache the old autocomplete function.
	var oldAutocomplete = $.fn.autocomplete;

	// This will be the new autocomplete function.
	return function () {
		// If the first argument isn't "destroy" which 
		// should restore the input to it's initial state.
		if (!/^destroy$/i.test(arguments[0]))
			// Attach event to the input which will prevent Enter submission as
			// explained above.
			this.keypress(cancelAutocompleteSumbission);				
		// We need to restore the input to it's initial state,
		// detach the keypress callback.    
		else
			this.off('keypress', cancelAutocompleteSumbission);
		
		// Call the cached function with the give "this" scope and paramteres.
		return oldAutocomplete.apply(this, arguments);
	};
})();


$('form').submit(function () {
    alert('You submitted the form');
    return false;
});

$('#autocomplete').autocomplete({
    source: ["c#", "c", "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
});