选择 jQuery UI 自动完成中的有效标签时启用 jQuery UI 对话框按钮

Question

我有一个 jQuery UI 对话框，其中包含一个填充有各种标签的 jQuery UI 自动完成输入框。对话框本身在按钮窗格中有两个按钮：“选择”和“取消”。但是，我想根据用户当前在输入框文本字段中的内容启用和禁用“选择”按钮。换句话说，自动完成使用的可用标签列表包含用户可以选择的所有有效选项。因此，如果他们从自动完成中选择其中一个标签，“选择”按钮将被启用，允许他们单击它。此外，如果他们只是输入正确的标签而没有从自动完成的下拉框中实际选择一个标签，我仍然希望启用这个“选择”按钮。

起初，我认为每次输入字段更改为可用标签列表时，我都会交叉引用当前输入框中的文本，以查看是否应该启用“选择”按钮，但到目前为止，它似乎没有工作。关于我如何做到这一点的任何建议？到目前为止，这是我尝试过的：

$("#dialog").dialog({
    autoOpen: false,
    buttons: {
        Select: function() {
            // Carry out some proceedure knowing they've selected a valid label.
        },
        Cancel: function() {
            // Cancels the selection and closes the dialog box.
        }
    },
    closeOnEscape: false,
    create: function(event, ui) {
        var labels = ["Bird", "Boar", "Dog", "Dragon", "Ox", "Tiger"];
        $("#input").autocomplete({
            delay: 0,
            source: labels
        });
        $("#input").change(function() {
            $(".ui-dialog-buttonpane button:contains('Select')").button("disable");
            labels.each(function() {
                if($("#input").text() == $(this)) {
                    $(".ui-dialog-buttonpane button:contains('Select')").button("enable");
                    return;
                }
            });
        });
    },
    draggable: false,
    modal: true,
    resizable: false,
    title: "Select Dialog",
    width: 460
});

Answer 1

您已经很接近了，使用$.inArray 切换按钮怎么样？此外，您需要使用$(this).val() 或this.value 来计算input 元素的值。

$("#dialog").dialog({
    autoOpen: false,
    buttons: {
        Select: function() {
            // Carry out some proceedure knowing they've selected a valid label.
        },
        Cancel: function() {
            // Cancels the selection and closes the dialog box.
        }
    },
    closeOnEscape: false,
    create: function(event, ui) {
        var labels = ["Bird", "Boar", "Dog", "Dragon", "Ox", "Tiger"];
        $("#input").autocomplete({
            delay: 0,
            source: labels
        });
        $("#input").change(function() {
            var enabled = $.inArray(this.value, labels) >= 0 ? "enable" : "disable";
            $(".ui-dialog-buttonpane button:contains('Select')").button(enabled);
        });
    },
    draggable: false,
    modal: true,
    resizable: false,
    title: "Select Dialog",
    width: 460
});

示例： http://jsfiddle.net/kcrBB/

---

根据评论，这是一个使用keyup 而不是更改的示例：

$("#dialog").dialog({
    open: function () {
        $(".ui-dialog-buttonpane button:contains('Select')").button("disable");
    },
    buttons: {
        Select: function() {
            // Carry out some proceedure knowing they've selected a valid label.
        },
        Cancel: function() {
            // Cancels the selection and closes the dialog box.
        }
    },
    closeOnEscape: false,
    create: function(event, ui) {
        var labels = ["Bird", "Boar", "Dog", "Dragon", "Ox", "Tiger"];
        $("#input").autocomplete({
            delay: 0,
            source: labels,
            select: function () {
                $(".ui-dialog-buttonpane button:contains('Select')").button("enable");       
            }
        });

        $("#input").keyup(function() {
            var enabled = $.inArray(this.value, labels) >= 0 ? "enable" : "disable";
            $(".ui-dialog-buttonpane button:contains('Select')").button(enabled);
        });
    },
    draggable: false,
    modal: true,
    resizable: false,
    title: "Select Dialog",
    width: 460
});

示例： http://jsfiddle.net/kcrBB/16/