添加到元素后如何删除自动完成功能？

Posted 2023-03-05

【中文标题】添加到元素后如何删除自动完成功能？

【英文标题】：How to remove an autocomplete once added to an element?

【发布时间】：2011-03-07 08:19:04

【问题描述】：

在我向以下元素添加自动完成功能后：

commObj=$("#communityName").autocomplete("auto_commName_backend.php",
                'onItemSelect': handleItemSelect, 'extraParams': 'ndo' + ndo);

有没有办法可以禁用它或动态删除元素的自动完成功能？

我正在使用 Dylan Verheul 的修改后的 jquery 自动完成插件。 http://www.pengoworks.com/workshop/jquery/autocomplete_docs.txt

【参考方案1】：

该插件非常紧密地连接到<input>。如果它是我的页面，我想我只有 两个 标签具有相同的“名称”，一个带有自动完成功能，一个没有。当我想在它们之间切换时，我会禁用并隐藏其中一个，并启用/显示另一个。 （编辑哦，还要确保字段的值在切换时来回复制）

【参考方案2】：

如果您向元素添加一个类，例如“EnableAC”，您可以将该类作为自动完成的目标。当您完成自动完成并想要禁用它时，您将删除该类。

您为什么要禁用该功能？如果您的用户想要更改他们的选择并且自动完成不会触发，这可能会使您的用户感到困惑。

【讨论】：

我不确定这会起作用，因为一旦插件绑定到<input>，就会保留几个事件处理程序。

【参考方案3】：

我刚刚简单浏览了插件的 js 文件。

在 jquery.autocomplete.js 插件的初始化过程中似乎有一条 javascript 行（编号 21）将原始源输入设置为：

input.autocompleter = me;

如果不进行测试，也许您可​​以简单地调用以下命令来删除插件和原始输入之间的链接？

$('#<your input id>').autocompleter = null;

【讨论】：

这可能可以工作，但脚本还绑定了一堆事件处理程序。

是的，就像我说的那样，我没有太多机会研究它，因为我很着急，但这可能是 P Coder 研究的一个很好的起点。我可以看到插件脚本中没有本机销毁功能。

【参考方案4】：

您可以使用以下代码行删除自动完成行为：

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

【讨论】：

我认为不需要关于 removeData 的那一行。我测试了，在做了 $(control).autocomplete('destroy') 然后 $(control).data('autocomplete') 返回 undefined

在我使用的 jQuery UI 版本 (1.11) 中，.data() 总是返回未定义的。省略条件并在对 autocomplete("destroy") 的调用周围加上 try/catch 会更安全。

【参考方案5】：

我刚试过 $('#').autocomplete = null; 它有效。 我允许更改苍蝇的名称，结果不会显示，现在可以了。 旧的未更改名称会在现在之前显示新名称

【参考方案6】：

我发现的最简单和最安全的方法是：

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

或者，如前所述，这也可以：

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

如果您确定您的控件设置了自动完成处理程序。

【讨论】：

这里的第一个选项对我来说是完美的。我动态生成“促销代码”，在选择一个之后，我想删除选择其他任何内容的能力，除非删除了添加的促销，所以： $('#tags_promo').autocomplete('option', 'source ', []);添加促销和 $('#tags_promo').autocomplete('option', 'source', availablePromo);在删除。非常感谢，我尝试做各种复杂的事情，而不是这个！

正是我需要的

【参考方案7】：

在最新版本的 jQuery UI(1.12) 中，即使存在自动完成数据，$(control).data('autocomplete') 也不会返回 true。

相反，检查 ui-autocomplete-input 类的存在返回 true。

我相信以下就足够了。

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

【参考方案8】：

禁用按元素 ID 自动完成：

 $("#elementId").autocomplete(
  disabled: true
  );