Tự động hoàn thành giao diện người dùng JQuery với .Net MVC: Cách hiển thị nhãn khi được chọn nhưng lưu giá trị

Question

Tôi đã triển khai Tự động điền và gặp sự cố với nhãn so với giá trị trong hộp văn bản sau khi mục được chọn. Khi tôi gõ vào một mã zip, tôi thấy các nhãn trong danh sách thả xuống:

nhưng sau khi tôi chọn một, thay vì nhãn hiển thị trong hộp văn bản, giá trị (mà là ID mà cần được lưu vào cơ sở dữ liệu) được hiển thị:

làm thế nào để vẫn hiển thị các nhãn sau khi nó được chọn, nhưng sau đó khi biểu mẫu được lưu, nó vượt qua ZipCodeID cho lĩnh vực này?

Dưới đây là phương pháp điều khiển của tôi:

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

Và đây là đánh dấu của tôi:

<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: Đây là mã làm việc cuối cùng của tôi:

Bộ điều khiển:

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

và đánh dấu:

<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

ngắn của việc thay đổi mô hình của bạn không sử dụng một ID khác nhau cho các mã zip ...

Tạo một trường ẩn để id mã bưu điện. Thay đổi hành vi chọn để điền trường ẩn với ID và trường hiển thị có nhãn.

Xem The sample cho làm thế nào để đạt được điều này

Bạn đã xem những gì sẽ xảy ra nếu họ gõ của riêng mình trong?

Answer 2

Nếu bạn thêm các dòng sau nó sẽ hiển thị nhãn và KHÔNG phải là id (mà tôi đã nghĩ là mặc định, nhưng này).

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