文本框鍵盤事件的自動完成功能

Question

代碼的第一部分用於在gridview中創建多個文本框。

在第二部分中，我想對文本框keyup事件使用自動完成功能。

第二部分不起作用。

$(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裏面使用它。

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