jQuery - Schlüssel/Wert-Paar bei der automatischen Vervollständigung verwenden

Question

In meiner ASP MVC-Ansicht gebe ich ein Schlüssel/Wert-Paar vom Controller zurück. Nach dem Betrachten von Fiddler und der Anzeige im Debugger von Chrome kann ich sehen, dass die Informationen korrekt zurückgegeben werden.

Ich möchte für die value des Schlüssel/Wert-Paares das Element sein, das in der autocomplete Liste angezeigt wird. Wenn der Benutzer ein Element aus der Liste auswählt, möchte ich, dass das Element key in das Textfeld eingefügt wird.

ist der jQuery-Code aus meiner Sicht

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

Eine Sache, die ich bemerkte - wenn ich die ui Variable auf die Merkliste in dem Browser-Debugger füge ich feststellen, dass das Etikett und der Wert ist exakt die gleiche . Ich sehe aber wieder, dass das komplette Schlüssel/Wert-Paar zurückgegeben wird.

Hier ist ein Screenshot der Netzwerk-/Reaktionskonsole, nachdem die Suche abgeschlossen ist. Einige der Daten sind privat, also verdunkelte ich sie, aber Sie können sehen, dass ein Schlüssel/Wert-Paar zurückgegeben wird.

Answer 1

Sie verlassen nun die AJAX-Request selbst vornehmen müssen und die Daten in das Format umwandeln, die jQueryUI erwartet:

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

Auch die value Eigenschaft eines der automatischen Vervollständigung Artikel wird automatisch platziert die input, wenn dieses Element ausgewählt ist, so sollte kein benutzerdefinierter select Handler benötigt werden.

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

Answer 2

von oben Same erarbeitete Bit

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

} 

Json Ergebnisformat