Question

I have a jQuery UI Dialog Box that contains a jQuery UI Autocomplete input box populated with various labels. The dialog box itself has two buttons in the buttonpane: “Select” and “Cancel.” However, I want enable and disable the “Select” button depending upon what the user has currently in the text field of the input box. In other words, the list of available tags that the autocomplete makes use of contains all of the valid options the user can select. So, if they select one of these labels from the autocomplete, the “Select” button will be enabled, allowing them to click it. In addition, if they simply type in the proper label without physically selecting one of the labels from the autocomplete’s drop-down box, I still want this “Select” button enabled.

At first, I figured I’d just cross-reference the text currently in the input box each time the input field changed with the list of available labels to see if I should enable the “Select” button, but so far, it hasn’t seemed to work. Any suggestions as to how I might accomplish this? Here’s what I’ve tried thus far:

$("#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

You were close, how about using $.inArray to toggle the button? Also, you need to use $(this).val() or this.value to figure out the value of an input element.

$("#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
});

Example: http://jsfiddle.net/kcrBB/

---

Per the comment, here’s an example with keyup instead of change:

$("#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
});

Example: http://jsfiddle.net/kcrBB/16/