切换自动完成打开/关闭表单字段

Question

I have a form field wherein a user enters their address. To make he user's life easier, I have added google places API address autocomplete to this field. Everything works great with this approach until you get in to using native browser autocomplete. If a user has autocomplete set up on their web browser, I obviously want them to be able to use that... the faster through the form the better. However, when a user is on my address field, the native autocomplete & the google places autocomplete end up competing with each other (native above the google places). It looks terrible, and is also a bad user experience for anyone who wanted to utilize the GP autocomplete.

My natural inclination was to simply toggle autocomplete="off" on the address field (using focus and blur ):

 $search_address
   //don't allow autocomplete when users are in this field as it messes with GP input
   .on('focus', function(e){
    $(this).attr('autocomplete', 'off'); console.log('autocomplete off');
   })

   //if the user is not in the field, allow autocomplete, or it messes with native AutoFill
   .on('blur', function(e){
    $(this).removeAttr('autocomplete'); console.log('autocomplete on');
   });

I can tell from my console logs that these are firing, however the native browser autocomplete is not being removed. I am not sure how to handle this situation. Anyone think of a way to do this or possibly know why this doesn't work?

Answer 1

Not sure if it matters or not but you may want to try using prop instead of attr:

$(this).prop("autocomplete","off");

I did and it worked for me in Chrome.