选择后清除 Jquery 自动完成中的文本框

Posted 2023-03-05

【中文标题】选择后清除 Jquery 自动完成中的文本框

【英文标题】：Clear text box in Jquery Autocomplete after selection

【发布时间】：2012-07-21 10:01:32

【问题描述】：

一旦用户做出选择，我想清除具有 Jquery 自动完成功能的文本框。

我尝试通过以下方式清除该字段：

select: function(event, ui) 
   $(this).val('');

但这不起作用。我使用的是 jquery-1.6.4 和 jquery-ui-1.8.16。

有什么想法吗？

【问题讨论】：

我注意到您的代码显示“选择”。只是想在我提供解决方案之前澄清它是一个文本框而不是一个选择框。

@CoreyRS：select 是您传递给autocomplete 以在用户选择自动完成选项之一时挂钩事件的选项的名称。

【参考方案1】：

select 事件在字段更新之前发生。您必须取消该事件以避免在清除后更新该字段：

select: function(event, ui) 
    $(this).val("");
    return false;

更新： 作为 T.J.下面指出，直接更新value DOM 属性而不是通过val() 会稍微快一些：

select: function(event, ui) 
    this.value = "";
    return false;

【讨论】：

+1 或只是this.value = "";，如their examples。

【参考方案2】：

我正在使用 jQuery UI 版本 1.8.23 和 $(this).val(""); on select 事件对我不起作用，但这样做：

$("selector").autocomplete(
    // ...
    close: function(el) 
        el.target.value = '';
    
);

【讨论】：

为我工作，谢谢

【参考方案3】：

试试

select: function(event, ui) 
input.value='';

【参考方案4】：

你也可以试试这个：

$("#your_autocomplete_sub_listview_id").children().addClass("ui-screen-hidden");

这将在选择它时隐藏所有自动完成过滤列表。