jQuery - Usa coppia chiave/valore in completamento automatico

Question

Nella vista ASP MVC, sto passando una coppia chiave/valore dal controller. Dopo aver esaminato il violinista e visualizzato il debugger di Chrome, posso vedere che le informazioni vengono trasmesse correttamente.

Desidero che value della coppia chiave/valore sia l'elemento visualizzato nell'elenco autocomplete. Quando l'utente seleziona un elemento dall'elenco, desidero che l'elemento key venga inserito nella casella di testo.

Ecco il codice jQuery dal mio punto di vista

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

Una cosa che ho notato - se aggiungo la variabile ui alla lista di controllo nel debugger del browser mi accorgo che l'etichetta e il valore sono la stessa identica . Di nuovo, tuttavia, vedo che ciò che viene restituito è la coppia chiave/valore completa.

Ecco una schermata della console Rete/Risposta al termine della ricerca. Alcuni dati sono privati ​​quindi l'ho oscurato, tuttavia è possibile vedere che viene restituita una coppia chiave/valore.

Answer 1

Avrai bisogno di fare l'AJAX chiedere se stessi e trasformare i dati nel formato che jQueryUI aspetta:

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

Inoltre, la value proprietà di un elemento di completamento automatico viene posto automaticamente in il input quando quell'elemento è selezionato, quindi non ci dovrebbe essere bisogno di un gestore personalizzato select.

Esempio:http://jsfiddle.net/Aa5nK/60/

Answer 2

Same dall'alto, elaborato po

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

} 

formato JSON risultato