selectjQuery UI自动完成后清除表单字段

我正在开发一个表单,并使用jQuery UI自动完成。 当用户select一个选项时,我希望selectpopup到附加到父<p>标签的范围中。 然后,我想要清除这个字段,而不是select填充。

我的跨度显得很好,但我无法领域清除。

你如何取消jQuery UI自动完成的默认select操作?

这是我的代码:

 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(""); 不起作用。 令人生气的是,如果我忽略自动完成,几乎精确的函数可以正常工作,并且在用户input逗号的时候采取行动:

 $('[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>"); } }); 

真正的最终结果是让自动完成与多个select一起工作。 如果有人有任何build议,他们会受到欢迎。

5 Solutions collect form web for “selectjQuery UI自动完成后清除表单字段”

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

这将阻止值被更新。 你可以在这里看到它是如何工作的。

那里的代码特别检查false:

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

而不是返回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(); } 

在selectcallback中需要返回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 } 

这对我来说很有用。

select事件后,我使用事件更改。

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

我是初学者!

尝试这个

 select: function (event, ui) { $(this).val(''); return false; } 
  • 自动填充请求/服务器响应是什么样的?
  • jQuery UI自动完成项目和ID
  • 在更新到1.11.0之后,自动完成要求您在iOS中点击两次
  • 如何在Rails中设置jquery-ui自动完成
  • jQuery UI自动完成宽度设置不正确
  • 如何将额外的parameter passing给Jquery自动填充字段?