0

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);
        }
    });
}
SvenskNavi
  • 87
  • 11
  • What would be the consequences of using an html input tag instead of cfinput? – Dan Bracuk Apr 27 '21 at 16:30
  • @DanBracuk Playing around with it now.. To prevent Chrome from suggesting previous form information, having to do the workaround of type="search", also because the jQuery autocomplete is setting autocomplete="off" so the workarounds I've found of autocomplete="bogus-value" get overwritten. The email validation then could get moved to a function that I could call on onfocusout. Overall seems feasible, though there may be something I'm not considering. – SvenskNavi Apr 27 '21 at 18:52
  • Does this answer your question? [Disabling Chrome Autofill](https://stackoverflow.com/questions/15738259/disabling-chrome-autofill) – Adrian J. Moreno Apr 28 '21 at 14:18
  • FWIW, it feels like Chrome is constantly battling that `autocomplete` setting. Found a few articles that mentioned additional attributes, but they work, then they don't, then they do. – Adrian J. Moreno Apr 28 '21 at 14:23

0 Answers0