jQuery - Użyj pary klucz/wartość w autouzupełnieniu

Question

W moim widoku ASP MVC, przekazuję parę klucz/wartość z powrotem z kontrolera. Po obejrzeniu skrzypka i wyświetleniu w debugerze Chrome widzę, że informacja jest przekazywana poprawnie.

Chciałbym, aby value pary klucz/wartość była pozycją wyświetlaną na liście autocomplete. Gdy użytkownik wybierze element z listy, chciałbym, aby element tego obiektu był key umieszczony w polu tekstowym.

Oto kod jQuery z moim zdaniem

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

Jedną rzeczą, jaką zauważyłem - jeśli dodać zmienną ui na liście obserwacyjnej w debuggera przeglądarki Zauważyłem, że etykieta, a wartość jest taka sama . Znowu jednak widzę, że zwracana jest pełna para klucz/wartość.

Poniżej przedstawiono zrzut ekranu konsoli Network/Response po zakończeniu wyszukiwania. Niektóre dane są prywatne, więc je zaciemniłem, ale widać, że zwracana jest para klucz/wartość.

Answer 1

Musisz dokonać AJAX zażądać siebie i przekształcania danych do formatu, który jQueryUI oczekuje:

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

Również własność przedmiotu autouzupełniania value jest automatycznie umieszczany w input, gdy ten element jest wybrany, więc nie powinno być potrzeby stosowania niestandardowego programu obsługi select.

przykład:http://jsfiddle.net/Aa5nK/60/

Answer 2

samo z góry nieco opracowano

przedni koniec

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

} 

formatu wynik Json