how enable a button if entered text is valid for autocomplete function?

Question

i have a textbox with autocomplete feature,and a button.I want to enable the button only when a value is selected from the autocomplete list. how to do this?

Here is my autocomplete function:

<script type="text/javascript">
    $(document).ready(function () {
        $("#<%=xyz.ClientID %>").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '<%=ResolveUrl("~/WebService.asmx/Get") %>',
                    data: "{ 'prefix': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.split('-')[0],
                                val: item.split('-')[1]
                            }
                        }))
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            },
            select: function (e, i) {
                $("#<%=abc.ClientID %>").val(i.item.val);
            },
            minLength: 0
        }).bind('focus', function () { $(this).autocomplete("search"); });
    });
</script>

Answer 1

For a plain button you'll want to set the the button as disabled when the document loads, e.g.

$(document).ready(function () {
    $('#btn')[0].disabled = true;
    ...

and then enable it with the select function, e.g.

select: function (e, i) {
    $("#<%=abc.ClientID %>").val(i.item.val);
    $('#btn').disabled = false; // <-- enables button
},

Answer 2

In your select function add this:

select: function (e, i) {
        $("#<%=abc.ClientID %>").val(i.item.val);
        $("#buttonid").prop("disabled", true); // true disabled, false enabled
},

EDIT: $("#buttonid").prop("disabled", false); // this put button enabled

JsFiddle - Example

Answer 3

Try This: The following will be called when you perform select (use keyboard to select, dont know about mouse select)

$( "#<%=xyz.ClientID %>"" ).on( "autocompleteselect", function( event, ui ) {
      $("#buttonid").prop("disabled", false);
});