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

Question

我正在开发一种形式，并使用jQuery UI自动完成。当用户选择一个选项，我想选择流行到附在母体<p>标签的跨度。然后我想现场清除，而不是选择进行填充。

我的跨度出现就好了，但我不能让现场清除。

你怎么取消jQuery UI的自动完成的默认选择的动作？

下面是我的代码：

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

而不是返回假的，你也可以使用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

返回假需要选择回调中，清空该字段。 但如果你想再次控制领域，即设置的值，你必须调用一个新的功能，打破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();