jQuery UI Autocomplete选择后清空表单字段

Question

我在开发一个表单，并使用jQuery UI Autocomplete。当用户选择一个选项时，我想让选择内容弹出到父级<p>标签附加的一个span中。然后我想要清除该字段而不是用所选内容填充。

我已经成功让出现了，但是我无法清除该字段。

如何取消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>");
    }
});

真正的最终目的是使自动完成功能能够使用多个选择。如果有人有任何建议，欢迎提出。

- Jon F Hancock

Answer 1

请在您的函数末尾添加$(this).val(''); return false;以清除字段并取消事件 :)。这将防止值被更新。 你可以在这里大约在第109行看到它是如何工作的。这段代码专门检查false：if ( false !== self._trigger( "select", event, { item: item } ) ) { self.element.val( item.value ); }

- Nick Craver

---

让我补充一下，一旦你返回 false，你就不需要再设置值了（即不需要 $(this).val('');）。 - Uri

如果想要输入字段为空，我认为仍需调用.val('')。return false;只会防止所选项目的文本出现在输入字段中。 - Ryan Lewis

Uri是错误的，而Ryan是正确的。你需要返回false来防止它根据你的选择进行更新，如果你想清除它，还需要$(this).val('')。 - mynameistechno

返回false为我解决了问题。当满足特定条件时，它会执行某些操作并清空值；如果为false，则会执行不同的操作并清空该值。只有“true”条件才会清空该值。最终发现只需返回false即可防止搜索字段更新，这让我感到非常疯狂。谢谢！ - notaceo

他们应该已记录下来选择函数没有覆盖他们的选择函数。 - r3wt

Answer 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();
}

- Paul Schröder

Answer 3

在选择回调函数中需要使用return false来清空字段。但是如果您想再次控制该字段，即设置值，则必须调用一个新函数来退出用户界面。

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

var promptText = "Enter a grocery item here."

将其设置为元素的值。(在焦点上，我们将其设置为空字符串'')。

$("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
}

- captahab

Answer 4

对我来说它很有效。

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

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

I'm a beginner!

- Silvana Saly Viana

Answer 5

尝试这个。

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

- ImBhavin95

Answer 6

我刚刚解决了这个问题，强制失去焦点：

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

- Mireia Gimeno