javascript JQuery 干净的自动完成组合框值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6779364/
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
JQuery clean autocomplete combobox value
提问by ClayKaboom
I used a jquery combobox for autocompletion and I needed to clean its value. I got into a solution which is like this: http://jsfiddle.net/BbWza/30/
我使用 jquery 组合框进行自动完成，我需要清理它的值。我进入了一个这样的解决方案：http: //jsfiddle.net/BbWza/30/
The problem is that the code below clears all textboxes of all combos in the screen. I'd like to clear only ONE combo (let's say the first one, for example).
问题是下面的代码清除了屏幕中所有组合的所有文本框。我只想清除一个组合（例如，让我们说第一个）。
$('.ui-autocomplete-input').focus().val('');
Although there is only one clear link button, it doesn't matter which combo will be cleared as long as only one is.
虽然只有一个清除链接按钮，但只要只有一个，哪个组合将被清除并不重要。
The solution should work for N combos in the screen. E.g. Each button should empty its corresponding combo.
该解决方案应该适用于屏幕中的 N 个组合。例如，每个按钮应该清空其对应的组合。
回答by JJJ
You can add ids to the generated fields by adding this line as the last line of _create():
您可以通过将此行添加为最后一行来将 id 添加到生成的字段_create()：
input.attr( 'id', $(select).attr( 'id' )+'-input' );
Now you can select individual fields with the ids:
现在您可以选择带有 id 的单个字段：
$('#combobox-input').focus().val('');
回答by gilly3
Your jsfiddleis a little ambiguous as to which combo box should be cleared - there are two combo boxes but only one clear link, so it's not obvious if the link is supposed to clear just one or both combo boxes.
您的 jsfiddle 关于应该清除哪个组合框有点含糊不清 - 有两个组合框，但只有一个清晰的链接，因此如果链接应该只清除一个或两个组合框，则并不明显。
I suspect in the real world that each combo box would have it's own clear link. Selecting the right text box for your clear link all depends on your html. One simple case would be where the clear link is the next sibling to your <select>element:
我怀疑在现实世界中，每个组合框都有自己的明确链接。为清晰链接选择正确的文本框完全取决于您的 html。一个简单的情况是 clear 链接是<select>元素的下一个兄弟：
<select class="combo">
...
</select>
<a href="#" class="clearCombo">Clear</a>
Then you could create the combos in one call by using class. Then create the clear click handlers all at once. The handler would use .prevAll(".ui-autocomplete-input")to find its associated textbox.
然后，您可以使用 class 在一次调用中创建组合。然后一次性创建清晰的点击处理程序。处理程序将用于.prevAll(".ui-autocomplete-input")查找其关联的文本框。
$("select.combo").combobox();
$("a.clearCombo").click(function () {
$(this).prevAll('.ui-autocomplete-input').first()
.focus()
.val('')
.autocomplete('close');
return false;
});
If your link is not a sibling of your combo box, that's ok. Either find its parent that is a sibling and use the above approach. Or, if that won't work, find the common parent of both the combo and the link. This only works if the common parent contains only one combo and one link:
如果您的链接不是组合框的兄弟，那也没关系。要么找到它的兄弟姐妹并使用上述方法。或者，如果这不起作用，请找到组合和链接的共同父级。这仅适用于共同父级仅包含一个组合和一个链接的情况：
<span class="comboContainer">
<span>
<select class="combo">
...
</select>
</span>
<a href="#" class="clearCombo">Clear</a>
</span>
You use .closest(".comboContainer")and .find(".ui-autocomplete-input"):
你使用.closest(".comboContainer")和.find(".ui-autocomplete-input")：
$("select.combo").combobox();
$("a.clearCombo").click(function () {
$(this).closest(".comboContainer").find('.ui-autocomplete-input')
.focus()
.val('')
.autocomplete('close');
return false;
});
The nice thing about these techniques is that the link doesn't need to know the id of its associated combobox. We can just infer it from the html. This makes it very easy to move combos around and add new ones.
这些技术的好处是链接不需要知道其关联组合框的 id。我们可以从 html 中推断出来。这使得移动组合和添加新组合变得非常容易。
Two suggestions:
两个建议：
- Add a clear method to your plugin. Your widget users shouldn't have to know its internal workings. In your example, you have to know that widget uses
.autocomplete(). This also prevents you from changing your implementation later. Adding a "clear" method would simplify your click handler to just$(this).prevAll("select.combo").combobox("clear"). - Give your widget the option to create the clear button itself. Users can always disable it and add their own clear button if they want.
- 为您的插件添加一个 clear 方法。您的小部件用户不应该知道其内部工作原理。在您的示例中，您必须知道小部件使用
.autocomplete(). 这也可以防止您以后更改您的实现。添加“清除”方法会将您的点击处理程序简化为$(this).prevAll("select.combo").combobox("clear"). - 为您的小部件提供创建清除按钮本身的选项。用户可以随时禁用它并根据需要添加自己的清除按钮。
回答by Nicola Peluchetti
To clear just only one combo you must select it with it's id:
要仅清除一个组合，您必须使用它的 id 选择它：
$('#combobox').focus().val('');
$('#combobox').autocomplete('close');
with your code you are selecting all comboboxes because you are using a class selector.
使用您的代码选择所有组合框，因为您使用的是类选择器。
EDIT if you want to make two buttons (one for each combobox) you could do:
编辑如果你想制作两个按钮（每个组合框一个），你可以这样做：
$('.clicky').click(function() {
var combo= $(this).prevAll('input:first');
combo.focus().val('');
combo.autocomplete('close');
return false;
});
fiddle here: http://jsfiddle.net/BbWza/39/
在这里小提琴：http: //jsfiddle.net/BbWza/39/
回答by Jo?o Pedro Hudinik
You can clear it in event "close" of the autocomplete
您可以在自动完成的事件“关闭”中清除它
$("#your-input").autocomplete({
source: items,
close: function (event, ui) {
$(this).val("");
}
});
回答by dkroy
Well, in the example the following would only clear the last combobox:$('.ui-autocomplete-input').last().focus().val('');
好吧，在示例中，以下内容只会清除最后一个组合框：$('.ui-autocomplete-input').last().focus().val('');
This would clear the first one:$('.ui-autocomplete-input').first().focus().val('');
这将清除第一个：$('.ui-autocomplete-input').first().focus().val('');
回答by prath Nik
How to give clear button for autocombobox please tell me
如何为自动组合框提供清除按钮，请告诉我
You can add ids to the generated fields by adding this line as the last line of _create():
您可以通过将此行添加为最后一行来将 id 添加到生成的字段_create()：
input.attr( 'id', $(select).attr( 'id' )+'-input' );
Now you can select individual fields with the ids:
现在您可以选择带有 id 的单个字段：
$('#combobox-input').focus().val('');
