Включить диалоговую кнопку 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/