Question

The first part of the code is used for creating multiple texboxes in gridview.

In the second part I want to use autocomplete functionality on textboxes keyup event.

The second part is not working.

$(function () {
            $('#cpContent_grdOrderDetail tr').attr('data-count', '0');
            $('.bull').click(function () {
                var NewRow = $(this).closest('tr');
                var SrNo = $(this).closest('tr').find('.GridTextBox').val();
                var no = parseInt(NewRow.attr('data-count'));
                var newx = no + 1;
                NewRow.attr('data-count', newx);
                var ProductId = $(this).closest('tr').find('#hfProductId').val();
                $(this).closest('tr').find('#hfAttachmentCount').val(no);
                alert(ProductId);
                var content = '<tr><td></td>';
                content = content + '<td><input type="text" ID="txtAttachmentCode' + SrNo + '_' + no + '" class="AttachmentAutoFill" /><input type="hidden" class="AttachPId" ID="hfProductId' + SrNo + '_' + no + '" Value=' + ProductId + ' /></td>';
                content = content + '<td><input type="text" ID="txtAttachName' + SrNo + '_' + no + '" /></td>';
                content = content + '<td colspan=2></td>';
                content = content + '<td><input type="text" ID="txtAttachmentQty' + SrNo + '_' + no + '"/></td>';
                content = content + '<td><input type="text" ID="txtAttachCost' + SrNo + '_' + no + '"/></td>';
                content = content + '<td colspan=3></td>';
                content = content + '<td><input type="text" ID="txtAttachmentTotalCost' + SrNo + '_' + no + '"/></td>';
                content = content + '</tr>';
                $(content).insertAfter(NewRow);
                return false;
            });

            $(document).on('keyup', '.AttachmentAutoFill', function () {
                var ProductId = $(this).next('.AttachPId').val();
                var FilterText = $(this).val();
                $(this).autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            url: '<%=ResolveUrl("~/WebService/GetItemsForAutoCompleteBox.asmx/GetAttachmentInfo") %>',
                            data: "{ 'ProductId': '" + $(this).next('.AttachPId').val() + "',FilterText'" + $(this).val() + "'}",
                            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) {

                    },
                    minLength: 1
                });
            });
        });

Answer 1

当您向请求调用$(this).next('.AttachPId')的请求发送数据时，您的ajax调用存在问题，但在$ .ajax $（this）内部未引用输入框，因此您需要将其保存在范围之外然后你可以在ajax中使用它。

 $(document).on('keyup', '.AttachmentAutoFill', function () {
        var ProductId = $(this).next('.AttachPId').val();
        var FilterText = $(this).val();
        var postData = {'ProductId':ProductId,'FilterText':FilterText};
        $(this).autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '<%=ResolveUrl("~/WebService/GetItemsForAutoCompleteBox.asmx/GetAttachmentInfo") %>',
                    data: postData ,
                    // other config stuff
                    success: function (data) {
                       // your success callback goes here
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            },
            select: function (e, i) {

            },
            minLength: 1
        });
    });

Autocomplete functionality on textbox keyup event

1 个答案: