Question

我想知道为什么从自动填充列表中选择后，标签字段会被值替换：

脚本：

<script>
$(document).ready(function () {
 $("#Users").autocomplete({source: function(request,response) 
 {
    $.ajax({
        url: "/Home/AutoCompleteUsers",
        type: "POST",dataType: "json",
        data: { term: request.term },
        success: function (data) {
             response($.map(data, function (item) {
               return { label:item.Name, value:item.ID };
             }))
         }
       })
     },
     select: function (event, ui){
          $("#Employees").val(ui.item.label);
          $("#EmployeeID").val(ui.item.value);
     },messages: {noResults: "", results: ""} 
   });
});

形式：

@using (Html.BeginForm("Show","Home", FormMethod.Post)){

    @Html.TextBox("Employees")
    <input id="EmployeeID" type="text"/>
    <input type="submit" value="Submit"/>
}

它显示了每个名称的相应ID，但文本框已被EmployeeID字段中的值替换。有什么想法吗？

Answer 1

根据jquery autocomplete的文档：

...具有标签和值属性的对象数组：[{label：＆＃34; Choice1＆＃34;，value：＆＃34; value1＆＃34; }，...] label属性显示在建议菜单中。当用户选择项目时，该值将插入到input元素中。如果仅指定了一个属性，则它将用于两者，例如，如果仅提供值属性，则该值也将用作标签。

如果您不想要这种行为，一种方法就是返回标签：

{return { item.Name };

但是这会在＆＃34;选择＆＃34;中给你带来问题。事件，因为你需要那里的ID。

所以也许这会更好：

$("#Users").autocomplete({
    source: function(request,response) 
    {
        $.ajax({
            url: "/Home/AutoCompleteUsers",
            type: "POST",
            dataType: "json",
            data: { term: request.term },
            success: function (data) {
                response($.map(data, function (item) {
                    return { label:item.Name, value:item.ID };
                }))
            }
        })
    },
    select: function (event, ui){
        event.preventDefault();
        $("#Employees").val(ui.item.label);
        $("#EmployeeID").val(ui.item.value);
    },
    messages: {noResults: "", results: ""} 
});

这将更新＆＃34;员工＆＃34;标签/名称和＆＃34; EmployeeID＆＃34;使用值/ id。您将自动完成绑定到＆＃34;用户＆＃34;，并且根本不应使用此代码更新。

MVC自动填充字段

1 个答案: