I've got a ColdFusion application that uses jQuery autocomplete to allow users to select an email address from a list of suggestions, and then upon doing so it autopopulates the rest of the form. The issue that I'm running into is since it's an email input, Chrome is autosuggesting forms inputs, and when the user selects Chrome's selections instead of jQuery's, it doesn't trigger the code in the autocomplete's select option.
Some of the things that I have considered / tried to implement are:
- Setting autocomplete="bogus-value", which seems to disable the jquery autocomplete
- Setting input type="search", which I can't do because I am using
<cfinput>
- Considering having the autopopulate function called when the email input loses focus, but not seeing focus events as an option in ColdFusion.
Any suggestions for a solution that gets jQuery autocomplete and Chrome working well together, that can be implemented in a ColdFusion app would be great. Thanks!
Edit: Adding relevant code.
Here's the input:
<cfinput type="text" name="EMAIL" ID="EMAIL" title="Employee Email Address"
size="40" required="yes" message="You must enter an e-mail in the format first.last@state.mn.us" validate="regular_expression" value="#EMAIL#"
pattern="^((([a-z]|[0-9]|[A-Z]|!|##|$|%|&|'|\*|\+|\-|\/|=|\?|\^|_|`|\{|\||\}|~)+(\.([a-z]|[0-9]|[A-Z]|!|##|$|%|&|'|\*|\+|\-|\/|=|\?|\^|_|`|\{|\||\}|~)+)*)@((((([a-z]|[0-9]|[A-Z])([a-z]|[0-9]|[A-Z]|\-){0,61}([a-z]|[0-9]|[A-Z])\.))*([a-z]|[0-9]|[A-Z])([a-z]|[0-9]|[A-Z]|\-){0,61}([a-z]|[0-9]|[A-Z])\.)[\w]{2,4}|(((([0-9]){1,3}\.){3}([0-9]){1,3}))|(\[((([0-9]){1,3}\.){3}([0-9]){1,3})\])))$">
And the javascript that binds the autocomplete:
$(window).load(function(){
$("#EMAIL").autocomplete({
source: "/_cfc/personpick.cfc?method=lookupPerson",
select: function (event, ui) {
if (ui.item) {
$('#EMAIL').attr('value', ui.item.value);
$('#EMAIL').val(ui.item.value);
recordAjax();
}
}
});
});
function recordAjax() {
var email = $("#EMAIL").val();
$.ajax({
url: "/_cfc/personpick.cfc?method=PersonRecord",
type: "POST",
dataType:"json",
data: {
'EMAIL':email
},
success:function(data) {
showDetail(data);
}
});
}