当使用Html.BeginCollectionItem时，MVC自动完成编辑器

我试图创建一个自动完成文本框，而使用EditorTemplate。我面临的问题是，通过使用Html.BeginCollectionItem()扩展解决方案(https://www.nuget.org/packages/BeginCollectionItem/)， EditorFor()和TextBoxFor()方法的Id得到动态设置，这打破了我的javascript。除此之外，我不知道这是否可能(如果可能的话，又是如何做到的)。下面你会发现我已经走了多远)。

在主视图中，我有一个循环，为集合中的每个项目生成部分视图

for (int i = 0; i < Model.VoedingCollection.Count; i++)
{
    @Html.EditorFor(x => x.VoedingCollection[i], "CreateVoedingTemplate")
}

部分视图CreateVoedingTemplate.cshtml使用Html.BeginCollectionItem()方法

@using (Html.BeginCollectionItem("VoedingCollection"))
{
    string uniqueId = ViewData.TemplateInfo.HtmlFieldPrefix.Replace('[', '_').Replace(']', '_').ToString();
    string searchId = "Search_";
    string standaardVoedingId = "StandaardVoeding_";
    foreach (KeyValuePair<string, object> item in ViewData)
    {
        if (item.Key == "Count")
        {
            searchId = searchId + item.Value.ToString();
            standaardVoedingId = standaardVoedingId + item.Value.ToString();
        }
    }
    <div class="form-horizontal">   
       <div class="form-group" id=@standaardVoedingId>
            @Html.LabelFor(model => model.fk_standaardVoedingId, "Voeding naam", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.HiddenFor(model => model.fk_standaardVoedingId)
                    <input type="text" id='@searchId' placeholder="Search for a product"/>
                </div>
       </div>
    </div>
    <script type="text/javascript">
        var id = '@uniqueId' + '_fk_standaardVoedingId'.toString();
        var search = '@searchId'.toString();
        var url = '@Url.RouteUrl("DefaultApi", new { httproute = "", controller = "AgendaApi" })';
        $(document.getElementById(search)).autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: url,
                    data: { query: request.term },
                    dataType: 'json',
                    type: 'GET',
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.standaardVoedingNaam,
                                value: item.standaardVoedingId
                            }
                        }));
                    }
                })
            },
            select: function (event, ui) {
                $(document.getElementById(search)).val(ui.item.label);
                //$('#id').val(ui.item.value);
                document.getElementById(id).value = ui.item.value;
                return false;
            },
            minLength: 1
        });
    </script>
}
<link href="~/Content/SearchBox/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/SearchBox/jquery-1.9.1.js"></script>
<script src="~/Scripts/SearchBox/jquery-ui.js"></script>

在上面的脚本中，我试图创建一个函数，用户可以在其中键入standaardVoeding项目的名称，然后获得结果，其中，在用户选择standaardVoeding项目后，设置standaardVoedingId属性。然后，在提交整个表单之后，控制器接收standaardVoedingId(以及所有其他信息)

所以我猜Javascript在某种程度上不能处理剃刀视图@代码，其次，Html.BeginCollectionItem做了一些可疑的事情，因为你不能在运行时通过代码设置其文本框的值。接下来，我试过做alert(document.getElementById(*html.begincollectionitemId*))，它发现字段很好。但显然其他方法都不起作用?

是否有更好的解决方案来让这个工作?