在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({ 
    ... 
});