Question

我使用jquery组合框进行自动完成，我需要清理它的值。我进入了一个像这样的解决方案：http://jsfiddle.net/BbWza/30/

问题是下面的代码清除了屏幕中所有组合的所有文本框。我想只清除一个组合（例如，第一个组合）。

 $('.ui-autocomplete-input').focus().val('');

虽然只有一个明确的链接按钮，但只要只有一个组合，清除哪个组合并不重要。

该解决方案适用于屏幕中的N个组合。例如。每个按钮都应清空其相应的组合。

Answer 1

您可以通过将此行添加为_create()的最后一行来向生成的字段添加ID：

input.attr( 'id', $(select).attr( 'id' )+'-input' );

现在，您可以使用ids选择单个字段：

$('#combobox-input').focus().val('');

Answer 2

要仅清除一个组合，您必须使用它的ID来选择它：

    $('#combobox').focus().val('');
    $('#combobox').autocomplete('close');

使用您的代码选择所有组合框，因为您正在使用类选择器。

编辑，如果你想做两个按钮（每个组合框一个），你可以这样做：

$('.clicky').click(function() {
    var combo= $(this).prevAll('input:first');
    combo.focus().val('');
    combo.autocomplete('close');
    return false;
});

在这里摆弄：http://jsfiddle.net/BbWza/39/

Answer 3

Your jsfiddle对于哪个组合框应该被清除有点模棱两可 - 有两个组合框但只有一个明确链接，所以如果链接应该只清除一个或两个组合框就不明显了。

我怀疑在现实世界中，每个组合框都有它自己的明确链接。选择明确链接的右侧文本框取决于您的HTML。一个简单的例子是clear链接是<select>元素的下一个兄弟：

<select class="combo">
    ...
</select>
<a href="#" class="clearCombo">Clear</a>

然后，您可以使用类在一次调用中创建组合。然后一次创建清晰的点击处理程序。处理程序将使用.prevAll(".ui-autocomplete-input")来查找其关联的文本框。

$("select.combo").combobox();
$("a.clearCombo").click(function () {
    $(this).prevAll('.ui-autocomplete-input').first()
        .focus()
        .val('')
        .autocomplete('close');
    return false;
});

Working demo at jsfiddle

如果你的链接不是你的组合框的兄弟，那没关系。找到它的父母是兄弟并使用上述方法。或者，如果这不起作用，找到组合和链接的共同父级。这仅在公共父级只包含一个组合和一个链接时才有效：

<span class="comboContainer">
    <span>
        <select class="combo">
            ...
        </select>
    </span>
    <a href="#" class="clearCombo">Clear</a>
</span>

您使用.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;
});

Working demo at jsfiddle

这些技术的好处是链接不需要知道其相关组合框的id。我们可以从html中推断它。这样可以很容易地移动组合并添加新的组合。

两个建议：

为插件添加一个清晰的方法。您的小部件用户不必知道其内部工作原理。在您的示例中，您必须知道窗口小部件使用.autocomplete()。这也会阻止您稍后更改您的实现。添加“清除”方法会将您的点击处理程序简化为$(this).prevAll("select.combo").combobox("clear")。
为您的小部件提供创建清除按钮的选项。用户可以随时禁用它，并根据需要添加自己的清除按钮。

Answer 4

嗯，在这个例子中，以下只会清除最后一个组合框：
$('.ui-autocomplete-input').last().focus().val('');

这将清除第一个：
$('.ui-autocomplete-input').first().focus().val('');

Answer 5

您可以在活动中清除它＆＃34;关闭＆＃34;自动完成

$("#your-input").autocomplete({
    source: items,            
    close: function (event, ui) {

        $(this).val("");

    }
});

Answer 6

如何为autocombobox提供清除按钮请告诉我

您可以通过将此行添加为_create()的最后一行来向生成的字段添加ID：

input.attr( 'id', $(select).attr( 'id' )+'-input' );

现在，您可以使用ids选择单个字段：

$('#combobox-input').focus().val('');

JQuery清除自动完成组合框值

6 个答案: