How to remove an autocomplete once added to an element?

You can remove the autocomplete behaviour by using following line of code:

if (jQuery(control).data('autocomplete')) {
  jQuery(control).autocomplete("destroy");
  jQuery(control).removeData('autocomplete');
}

The easiest and safest way I found is:

$(control).autocomplete({source: []});

Alternatively, as mentioned before this also works:

$(control).autocomplete("destroy");

If you are sure your control has an autocomplete handler set.

In the latest version of jQuery UI(1.12), $(control).data('autocomplete') isn't returning true even when the autocomplete data is present.

Instead, a check for the presence of ui-autocomplete-input class returned true.

The following should suffice, I believe.

if ($(control).hasClass('ui-autocomplete-input')) {
   $(control).autocomplete("destroy");
}

Related