在AJAX加載的部分視圖（MVC4）上使用自動完成（JQuery）

Question

我有一個視圖來創建包含（除其他外）公司相關數據表的項目模型。

我已經添加了一個按鈕，確實AJAX調用，以檢索的局部視圖，並將其添加到該表：

$("#addCompanyRoleProject").click(function() { 
     cache: false, 
     $.get('CompanyRoleProjectEntryRow', function (result) { 

       $("#companyTable").append(result); // Add the row to the table 

     }, "html").done(function (result) { 


      }); 

      return false; 
     }); 

局部視圖是一個< TR>在至極的< TD之一>的具有輸入字段：

<input class="company-role-project-company" type="text" data-containerPrefix="@ViewData["ContainerPrefix"]" /> 

我想通過AJAX接收到的局部視圖內輸入字段是一個自動完成（http://jqueryui.com/autocomplete/），使得用戶能夠從一組選項每個<輸入選擇>爲桌子的每一排。

我似乎無法訪問主視圖中的AJAX調用通訊員字段。我試過在成功和完成函數上使用「filter（）」和「find（）」。

我可以把我的javascript代碼的局部視圖裏面，但隨後會被複制，更何況可能ID colisions = \

就如何實現這一目標的任何ideias？

編輯：

我相信我擁有的一切在我看來，正確引用：

@section Scripts { 
    @Styles.Render("~/Content/themes/base/css") 
    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/jqueryui") 
    @Scripts.Render("~/bundles/jqueryval") 

    <<<< My JS code is here >>>> 

} 

而且在我的網頁的源代碼，我可以看到：

<script src="/Scripts/jquery-1.7.1.js"></script> 
<script src="/Scripts/jquery-ui-1.8.20.js"></script> 
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script> 
<script src="/Scripts/jquery.validate.js"></script> 
<script src="/Scripts/jquery.validate.unobtrusive.js"></script> 

EDIT 2 ：

我跟着達林季米特洛夫的意見，並將此Ajax的成功回調，結果追加到表後：

$('input.company-role-project-company', result).autocomplete({ 
    ...define source etc... 
}); 

但是，當我在輸入字段中鍵入一些，它的行爲就像一個普通的文本字段... 在我使用ajax調用的過程中是否存在錯誤：請求局部視圖，將它附加到表中，使其成爲自動完成？

Answer 1

最後我做這樣的：

// Add entry to table 
    $(function() { 
     $("#addItemButton").click(function() { 
      cache: false 
      $.get('URL.......', function (template) { 
       $('#table> tbody:last').append(template); 
      }); 
      return false; 
     }); 
    }); 

    $(".the-class-used-in-the-desired-field-from-partial-view").live("click", function() { 
     $(this).autocomplete({ 
      source: function (request, response) { 
       $.ajax({ 
        url: "URL.........", type: "GET", dataType: "json", 
        data: { term: request.term }, 
        success: function (data) { 
         response($.map(data, function (item) { 
          return { ....... }; 
         })) 
        } 
       }) 

      }, 
      minLength: 1, 
      select: function (event, ui) { 

       ... Do some magic ... 
      } 
     }); 
    }); 

IE，我綁定的自動完成與.live功能，在AJAX之外。 可能不是最好的方式，但到目前爲止，它的工作正如我所願，用於多個條目。

由於達林季米特洛夫反正指着我正確的方向與

$('input.company-role-project-company', result) 

Answer 2

試試你這樣的AJAX成功回調裏面你追加新的部分標記到DOM後：

$('input.company-role-project-company', result).autocomplete({ 
    ... 
});