jQuery - Sử dụng cặp khóa/giá trị trong tự động hoàn thành

Question

Trong chế độ xem ASP MVC của tôi, tôi đang chuyển cặp khóa/giá trị trở lại từ bộ điều khiển. Sau khi xem xét công cụ tìm kiếm và xem trong trình gỡ lỗi của Chrome, tôi có thể thấy thông tin đang được truyền lại chính xác.

Tôi muốn cho value của cặp khóa/giá trị là mục được hiển thị trong danh sách autocomplete. Khi người dùng chọn một mục từ danh sách, tôi muốn mục đó là key để được đặt vào hộp văn bản.

Đây là mã jQuery từ quan điểm của tôi

$(function() { 
    $('#DRMCompanyId').autocomplete({ 
     source: '@Url.Action("compSearch", "AgentTransmission")', 
     minLength: 2, 
     select: function (event, ui) { 
      $('#DRMCompanyId').val(ui.item.label); 
     } 
    }); 
}); 

Một điều tôi nhận thấy - nếu tôi thêm các biến ui vào danh sách theo dõi trong trình gỡ lỗi của trình duyệt Tôi nhận thấy rằng nhãn và giá trị là chính xác cùng . Một lần nữa, tuy nhiên, tôi thấy rằng những gì đang được trả về là cặp khóa/giá trị hoàn chỉnh.

Đây là ảnh chụp màn hình của bảng điều khiển Mạng/phản hồi sau khi quá trình tìm kiếm hoàn tất. Một số dữ liệu là riêng tư vì vậy tôi bôi đen nó ra tuy nhiên bạn có thể thấy có một cặp khóa/giá trị được trả về.

Answer 1

Bạn sẽ cần phải thực hiện các yêu cầu AJAX bản thân và chuyển đổi dữ liệu sang định dạng mà jQueryUI hy vọng:

$(function() { 
    $('#DRMCompanyId').autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       url: '@Url.Action("compSearch", "AgentTransmission")', 
       type: 'GET', 
       dataType: 'json', 
       data: request, 
       success: function (data) { 
        response($.map(data, function (value, key) { 
         return { 
          label: value, 
          value: key 
         }; 
        })); 
       } 
      }); 
     }, 
     minLength: 2 
    }); 
}); 

Ngoài ra, value tài sản của một mục autocomplete được tự động đặt trong input khi mục đó được chọn, vì vậy không cần thiết phải xử lý tùy chỉnh select.

Ví dụ:http://jsfiddle.net/Aa5nK/60/

Answer 2

Same từ trên cao, chút xây dựng

Front End

<input id="CompanySearch" type="text" /> 

<script> 
    $(function() { 
     $("#CompanySearch").autocomplete({ 
      source: function (request, response) { 
       $.ajax({ 
        url: '@Url.Action("GetCompanyAutoComplete", "Admin")', 
        dataType: "json", 
        data: { term: request.term }, 
        success: function (data) { 
         response(data); 
        } 
       }); 
      }, 
      minLength: 2 
     }); 
    }); 
</script> 

C#

public JsonResult GetCompanyAutoComplete(string term) 
{ 
    var search = term.Trim(); 

    var itemList = (from items in db.TblProductSuggestionFirsts where items.Name.StartsWith(search) select new { label = items.Name, value = items.Name }).Take(50).ToList(); 

    return Json(itemList, JsonRequestBehavior.AllowGet); 

} 

định dạng kết quả Json