选择 jQuery UI 自动完成后清除表单字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2561903/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clear form field after select for jQuery UI Autocomplete
提问by Jon F Hancock
I'm developing a form, and using jQuery UI Autocomplete. When the user selects an option, I want the selection to pop into a span appended to the parent <p>tag. Then I want the field to clear rather than be populated with the selection.
我正在开发一个表单，并使用 jQuery UI 自动完成。当用户选择一个选项时，我希望选择弹出到附加到父<p>标签的跨度中。然后我希望该字段被清除而不是被选择填充。
I have the span appearing just fine, but I can't get the field to clear.
我的跨度看起来很好，但我无法清除该字段。
How do you cancel jQuery UI Autocomplete's default select action?
如何取消 jQuery UI 自动完成的默认选择操作？
Here is my code:
这是我的代码：
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>");
}
});
Simply doing $(this).val("");doesn't work. What is maddening is that almost the exact function works fine if I ignore autocomplete, and just take action when the user types a comma as such:
简单地做$(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>");
}
});
The real end result is to get autocomplete to work with multiple selections. If anybody has any suggestions for that, they would be welcome.
真正的最终结果是让自动完成与多个选择一起工作。如果有人对此有任何建议，他们将受到欢迎。
回答by Nick Craver
Add $(this).val(''); return false;to the end of your selectfunction to clear the field and cancel the event :)
添加$(this).val(''); return false;到select函数的末尾以清除字段并取消事件:)
This will prevent the value from being updated. You can see how it works around line 109 here.
这将阻止更新值。您可以在此处查看其在第 109 行附近的工作方式。
The code in there checks for false specifically:
那里的代码专门检查 false ：
if ( false !== self._trigger( "select", event, { item: item } ) ) {
self.element.val( item.value );
}
回答by Paul Schr?der
Instead of return false you could also use event.preventDefault().
除了 return 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();
}
回答by captahab
return false is needed within the select callback, to empty the field. but if you want to again control the field, i.e. set the value, you have to call a new function to break out of the ui.
在 select 回调中需要 return false 来清空该字段。但是如果你想再次控制字段，即设置值，你必须调用一个新的函数来打破ui。
Perhaps you have a prompt value such as :
也许您有一个提示值，例如：
var promptText = "Enter a grocery item here."
Set it as the element's val. (on focus we set to '').
将其设置为元素的 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
}
回答by Silvana Saly Viana
It works well for me.
这对我来说很有用。
After select event,I used event change.
选择事件后，我使用了事件更改。
change:function(event){
$("#selector").val("");
return false;
}
I'm a beginner!
我是初学者！
回答by ImBhavin95
Try This
尝试这个
select: function (event, ui) {
$(this).val('');
return false;
}
回答by Mireia Gimeno
I just solved it forcing to lose focus:
我刚刚解决了它迫使失去焦点：
$('#select_id').blur();
printResult();
