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

Question

我正在开发一个表单，并使用 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>");
    }
});

真正的最终结果是让自动完成功能与多项选择一起工作。如果有人对此有任何建议，他们将受到欢迎。

Answer 1

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

这将防止值被更新。你可以在这里看到它在第 109 行附近是如何工作的。

那里的代码专门检查错误：

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

Answer 2

除了返回 false，您还可以使用 event.preventDefault()。

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

Answer 3

在选择回调中需要 return 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
}

Answer 4

这对我来说很有用。

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

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

我是初学者！

Answer 5

尝试这个

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

Answer 6

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

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