选择 jQuery UI 自动完成后清除表单字段

Posted 2023-05-08

【中文标题】选择 jQuery UI 自动完成后清除表单字段

【英文标题】：Clear form field after select for jQuery UI Autocomplete

【发布时间】：2011-02-03 10:48:33

【问题描述】：

我正在开发一个表单，并使用 jQuery UI 自动完成功能。当用户选择一个选项时，我希望选择弹出到附加到父 <p> 标记的跨度中。然后我希望该字段清除而不是填充选择。

我的跨度看起来很好，但我无法清除该字段。

如何取消 jQuery UI Autocomplete 的默认选择动作？

这是我的代码：

var availableTags = ["cheese", "milk", "dairy", "meat", "vegetables", "fruit", "grains"];
$("[id^=item-tag-]").autocomplete(
    source: availableTags,

    select: function()
        var newTag = $(this).val();
        $(this).val("");
        $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    
);

仅仅做$(this).val(""); 是行不通的。令人抓狂的是，如果我忽略自动完成功能，几乎所有功能都可以正常工作，并且在用户输入逗号时采取行动：

$('[id^=item-tag-]').keyup(function(e) 
    if(e.keyCode == 188) 
        var newTag = $(this).val().slice(0,-1);
        $(this).val('');
        $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    
);

真正的最终结果是自动完成以处理多项选择。如果有人对此有任何建议，欢迎提出。

【参考方案1】：

添加$(this).val(''); return false; 到您的 select 函数结束以清除字段并取消事件:)

这将阻止值被更新。你可以看看它是如何工作的around line 109 here。

其中的代码专门检查是否为 false：

if ( false !== self._trigger( "select", event,  item: item  ) ) 
  self.element.val( item.value );

【讨论】：

让我补充一点，一旦你返回 false，你就不再需要自己设置值（即不需要$(this).val('');）

如果希望输入字段完全清除任何值，我相信仍然必须调用.val('')。 return false; 只会阻止所选项目的文本出现在输入字段中。

Uri 不正确，Ryan 正确。你需要返回 false 以防止它随着你的选择而更新，如果你想清除它，你还需要 $(this).val('') 。

return false 为我做了。我让它工作，如果满足某个条件，它会做一些事情并清空值，如果是假的，它会做不同的事情并清空值。只有“真”条件才真正消除了该值。终于发现我可以返回 false 以防止它在搜索字段中更新，这真是令人抓狂。谢谢！

他们应该记录下 select 函数没有覆盖他们的 select 函数。

【参考方案2】：

你也可以使用 event.preventDefault() 来代替 return false。

select: function(event, ui)
    var newTag = $(this).val();
    $(this).val("");
    $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    event.preventDefault();

【参考方案3】：

在选择回调中需要返回 false 来清空该字段。 但是如果你想再次控制字段，即设置值，你必须调用一个新函数来打破 ui。

也许你有一个提示值，例如：

var promptText = "Enter a grocery item here."

将其设置为元素的 val。 （在焦点上我们设置为''）。

$("selector").val(promptText).focus(function()  $(this).val(''); ).autocomplete(
    source: availableTags,
    select: function()
        $(this).parent().append("<span>" + ui.item.value + "<a href=\"#\">[x]</a> </span>");
     foo.resetter(); // break out //
    return false;  //gives an empty input field // 
    
);

foo.resetter = function() 
  $("selector").val(promptText);  //returns to original val

【参考方案4】：

对我来说效果很好。

选择事件后，我使用了事件更改。

 change:function(event)
   $("#selector").val("");  
   return false;
 

我是初学者！

【参考方案5】：

试试这个

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

【参考方案6】：

我刚刚解决了它强迫失去焦点：

$('#select_id').blur();
printResult();