Rectangle 27 0

Enable jQuery UI Dialog Button when a Valid Label from a jQuery UI Autocomplete is Selected?


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

@KrisSchouw: Good point. I updated the second example. I would actually use the select event instead of binding to click.

@KrisSchouw: Sure thing, see the updated answer.

Ah, I see. The one issue I have is that it only triggers the change when you either select one of the labels from the autocomplete (which is perfect) or when the user presses enter after typing. Is there anyway to have it check whenever a key is added or removed? Like rather than using the change event, using the keypress or keyup event?

Ah, ok, thanks. I originally missed disabling the button on the open event, which was throwing me off. The second fiddle you posted does just about what I'm looking for. Unfortunately, the user still has to hit a key after they've clicked on one of the autocomplete labels in order to trigger the check. Could this be combined with the select event the Autocomplete comes compatible with, too?

I managed to make $(".ui-autocomplete").click() trigger the same check, and it works like a charm. Thank you.

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

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.

Note