使用 jQuery UI 自动完成更改下一个输入元素值

Question

我正在使用 ASP.NET MVC 开发一个项目，并尝试使用 jQuery UI 自动完成小部件，以便用户可以从练习名称列表中进行选择，并且 jQuery 代码将根据练习自动设置练习 ID 值已选中。

我一直在使用this article 中的方法，自动完成功能允许从练习名称列表中进行选择，但是我似乎无法设置练习 ID 的值。

在我看来，HTML/Razor 代码如下所示：

<tbody id="tablebody">
@for (int i = 0; i < Model.ExerciseRecords.Count; i++ )
{
    <tr>
        <td>
            @Html.TextBoxFor(m => m.ExerciseRecords[i].Exercise.ExerciseName, new { @class = "autocomplete form-control", id = "", data_url = @Url.Action("AutoComplete") })                
        </td>
        @Html.HiddenFor(m => m.ExerciseRecords[i].Exercise.ExerciseId, new { id = "ExerciseId_" + i, name = "ExerciseId", @class = "ExerciseId"})
        <td>
            @Html.TextBoxFor(m => m.ExerciseRecords[i].Reps, new { id = "", @class = "form-control", name = "Reps", value = 0 })
            <input type="hidden" name="ExerciseRecord.Index" value=@i />
        </td>
        <td>
            @Html.TextBoxFor(m => m.ExerciseRecords[i].Sets, new { id = "", @class = "form-control", name = "Sets", value = 0 })
        </td>
        <td>
            @Html.TextBoxFor(m => m.ExerciseRecords[i].Weight, new { id = "", @class = "form-control", name = "Weight", value = 0 })
        </td>
    </tr>

}

这呈现为以下 HTML 代码：

<tbody id="tablebody">
<tr>
    <td>
        <input class="autocomplete form-control" data-url="/Workout/AutoComplete" name="ExerciseRecords[0].Exercise.ExerciseName" type="text" value="" />
    </td>
    <input class="ExerciseId" data-val="true" data-val-number="The field ExerciseId must be a number." data-val-required="The ExerciseId field is required." id="ExerciseId_0" name="ExerciseRecords[0].Exercise.ExerciseId" type="hidden" value="" />
    <td>
        <input class="form-control" data-val="true" data-val-number="The field Reps must be a number." data-val-required="The Reps field is required." name="ExerciseRecords[0].Reps" type="text" value="0" />
        <input type="hidden" name="ExerciseRecord.Index" value=0 />
    </td>
    <td>
        <input class="form-control" data-val="true" data-val-number="The field Sets must be a number." data-val-required="The Sets field is required." name="ExerciseRecords[0].Sets" type="text" value="0" />
    </td>
    <td>
        <input class="form-control" data-val="true" data-val-number="The field Weight must be a number." data-val-required="The Weight field is required." name="ExerciseRecords[0].Weight" type="text" value="0" />
    </td>
</tr>

我的 jQuery 代码如下所示：

var autoCompVals = {
    minLength: 0,
    source: function (request, response) {
        var url = $(this.element).data('url');

        $.getJSON(url, { term: request.term }, function (data) {
            response(data)
        })
    },


    select: function (event, ui) {            
        $(event.target).next().val(ui.item.id);   
    },
    change: function(event, ui) {
        if (!ui.item) {
            $(event.target).val('').next().val('');
        }
    }
};

$(".autocomplete").autocomplete(autoCompVals);

练习的 JSON 数据如下所示：

[{"id":1,"value":"Bench Press","label":"Bench Press"},{"id":2,"value":"Deadlift","label":"Deadlift"},{"id":3,"value":"Chin-up","label":"Chin-up"},{"id":4,"value":"Squat","label":"Squat"},{"id":5,"value":"Overhead Press","label":"Overhead Press"},{"id":7,"value":"Dumbbell Curl","label":"Dumbbell Curl"}]

我尝试过使用 next()、next('input[type=hidden]')、nextAll('input[type=hidden') 但它们似乎都没有改变 ExerciseId 的输入值。

当我尝试保存时，ModelState 无效，并且每个值都与在我的表单中输入的一样，除了 ExperimentId，它的尝试值为“”。

谁能提供任何关于我做错了什么的建议？

Answer 1

我原来的答案：

$(event.target).parent().next()

这是因为.next() 不会超出当前嵌套级别。您必须回到 td，然后获取下一个孩子（td 的父母，即 tr）。不过……

更好的答案： 不要将输入元素直接放在 tr 元素内。这是无效的。这是一个示例，我使用自动完成功能移动了 td 内的隐藏元素并将其更改为输入文本（将其更改回隐藏以保持隐藏）：

var autoCompVals = {
    minLength: 0,
    source: function (request, response) {
        var url = $(this.element).data('url');
      
        /* Simulate call */
        response([{"id":1,"value":"Bench Press","label":"Bench Press"},{"id":2,"value":"Deadlift","label":"Deadlift"},{"id":3,"value":"Chin-up","label":"Chin-up"},{"id":4,"value":"Squat","label":"Squat"},{"id":5,"value":"Overhead Press","label":"Overhead Press"},{"id":7,"value":"Dumbbell Curl","label":"Dumbbell Curl"}]);
        return;

        $.getJSON(url, { term: request.term }, function (data) {
            response(data)
        })
    },


    select: function (event, ui) {            
        $(event.target).next().val(ui.item.id);   
    },
    change: function(event, ui) {
        if (!ui.item) {
            $(event.target).val('').next().val('');
        }
    }
};

$(".autocomplete").autocomplete(autoCompVals);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<table>
<tbody id="tablebody">
<tr>
    <td>
        <input class="autocomplete form-control" data-url="/Workout/AutoComplete" name="ExerciseRecords[0].Exercise.ExerciseName" type="text" value="" />
        <input class="ExerciseId" data-val="true" data-val-number="The field ExerciseId must be a number." data-val-required="The ExerciseId field is required." id="ExerciseId_0" name="ExerciseRecords[0].Exercise.ExerciseId" type="text" value="" />      
    </td>

    <td>
        <input class="form-control" data-val="true" data-val-number="The field Reps must be a number." data-val-required="The Reps field is required." name="ExerciseRecords[0].Reps" type="text" value="0" />
        <input type="hidden" name="ExerciseRecord.Index" value=0 />
    </td>
    <td>
        <input class="form-control" data-val="true" data-val-number="The field Sets must be a number." data-val-required="The Sets field is required." name="ExerciseRecords[0].Sets" type="text" value="0" />
    </td>
    <td>
        <input class="form-control" data-val="true" data-val-number="The field Weight must be a number." data-val-required="The Weight field is required." name="ExerciseRecords[0].Weight" type="text" value="0" />
    </td>
</tr>
  </table>

修正后的剃刀视图：

<tbody id="tablebody">
@for (int i = 0; i < Model.ExerciseRecords.Count; i++ )
{
    <tr>
        <td>
            @Html.Hidden("ExerciseRecord.Index",i)
            @Html.TextBoxFor(m => m.ExerciseRecords[i].Exercise.ExerciseName, new { @class = "autocomplete form-control", id = "", data_url = @Url.Action("AutoComplete") })  
            @Html.HiddenFor(m=>m.ExerciseRecords[i].Exercise.ExerciseId, new { id="ExerciseId_"+i, name="ExerciseId", @class="ExerciseId"})              
        </td>

        <td>
            @Html.TextBoxFor(m => m.ExerciseRecords[i].Reps, new { id = "", @class = "form-control", name = "Reps", value = 0 })
        </td>
        <td>
            @Html.TextBoxFor(m => m.ExerciseRecords[i].Sets, new { id = "", @class = "form-control", name = "Sets", value = 0 })
        </td>
        <td>
            @Html.TextBoxFor(m => m.ExerciseRecords[i].Weight, new { id = "", @class = "form-control", name = "Weight", value = 0 })
        </td>
    </tr>

}

我还将索引移到顶部，我认为它需要在该位置，并将其更改为 Html.Hidden 表单而不是原始 html 只是保持一致，因为您将 Html Helpers 用于其他所有内容。