JQuery UI Autocompletar con .Net MVC: Cómo mostrar la etiqueta cuando está seleccionada, pero guardar el valor

Question

Implementé Autocompletar y tengo problemas con la etiqueta frente al valor en el cuadro de texto después de seleccionar el elemento. Cuando escribo en un código postal, veo la etiqueta en el menú desplegable:

pero después de seleccionar uno, en lugar de la etiqueta que muestra en el cuadro de texto, el valor (que es el ID que necesita para ser guardado en la base de datos) se visualiza:

¿Cómo siguen mostrando la etiqueta después de que se ha seleccionado, pero luego cuando se guarda el formulario, se pasa el ZipCodeID para el campo?

Aquí es mi método de control:

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); 
    } 

Y aquí es mi marcado:

<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> 

EDIT: Aquí está mi código de trabajo final:

controlador:

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); 
    } 

y marcado:

<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

menos que cambiar su modelo para no utilizar un ID diferente para códigos postales ...

crear un campo oculto para el ID de código postal. Cambie el comportamiento de selección para rellenar el campo oculto con el ID y el visible con la etiqueta.

Ver The sample de cómo lograr esto

¿Ha considerado lo que sucede si escribe en su propio?

Answer 2

Si agrega las siguientes líneas, se mostrará la etiqueta y NO la identificación (que pensé que debería ser la predeterminada, pero bueno).

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