JQuery用户界面自动完成与.net MVC：选择时，如何显示标签，但保存价值

Question

我已经实现自动完成，并且选择了项目后，我在与标签与在文本框中的值的麻烦。当我在一个邮政编码型，i看到标签在下拉：

但我选择一个之后，代替标签在文本框中示出，该值（这是ID，需要保存到数据库中）显示：

如何仍显示标签选中它后，但是当被保存形式，它通过ZipCodeID的领域？

这里是我的控制器方法：

public JsonResult FindZipCode(string term) 
    { 
     VetClinicDataContext db = new VetClinicDataContext(); 

     var zipCodes = from c in db.ZipCodes 
         where c.ZipCodeNum.ToString().StartsWith(term) 
         select new { value = c.ZipCodeID, label = c.ZipCodeNum}; 

     return this.Json(zipCodes, JsonRequestBehavior.AllowGet); 
    } 

这是我的标记：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#ZipCodeID").autocomplete({ 
        source: '<%= Url.Action("FindZipCode", "Customers") %>', 
     }); 
    }); 
</script> 

<div class="ui-widget"><input type="text" name="ZipCodeID" id="ZipCodeID" /></div> 

编辑：这是我最后的工作代码：

控制器：

public JsonResult FindZipCode(string term) 
    { 
     VetClinicDataContext db = new VetClinicDataContext(); 

     var zipCodes = from c in db.ZipCodes 
         where c.ZipCodeNum.ToString().StartsWith(term) 
         select new { value = c.ZipCodeID, label = c.ZipCodeNum}; 

     return this.Json(zipCodes, JsonRequestBehavior.AllowGet); 
    } 

和标记：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#ddZipCode").autocomplete({ 
      source: '<%= Url.Action("FindZipCode", "Customers") %>', 
      select: function(event, ui) { 
       var zipCodeID = parseInt(ui.item.value, 1); 
       $("#ddZipCode").val(ui.item.label); 
       $("#ZipCodeID").val(ui.item.value); 
       return false; 
      } 
     }); 
    }); 
</script> 

<div class="ui-widget"><input type="text" name="ddZipCode" id="ddZipCode" /></div> 
<%= Html.Hidden("ZipCodeID")%> 

Answer 1

短期改变你的模式不可使用不同的ID为邮政编码的...

为邮编ID创建一个隐藏字段。更改选择行为以使用ID填充隐藏字段，并使用标签填充可见字段。

见The sample如何实现这个

你有没有考虑，如果他们在输入自己发生了什么？

Answer 2

如果添加下面的行，它将显示标签，而不是id（我认为应该是默认值，但是嘿）。

select: function (event, ui) { 
    event.preventDefault(); 
    event.target.innerText = ui.item.label; 
}