json - Adding StateCode dash StateName to the autocomplete using MVC4.5 and a JsonResult -

i trying state code followed dash , state name using ajax autocomplete syntax. i'm using jquery , jqueryui , jqueryui autocomplete function attempt this.

i using json result:

[{"code":"ak","name":"alaska"},{"code":"al","name":"alabama"}, {"code":"ar","name":"arkansas"},{"code":"az","name":"arizona"}, {"code":"ca","name":"california"}, ... ] 

and i'm using jquery ajax call embedded

   $.ajax({         url: '/cats/state/list',         type: 'post',         datatype: 'json',         success: function (data) {             $('#cat_statecode').autocomplete(             {                 source: data.code + '-' + data.name,                 minlength: 2             });         }     }); 

the mvc controller json result looks this:

    public jsonresult list()     {         return json(db.states.tolist(), jsonrequestbehavior.allowget);     } 

how auto complete show: ca - california co - colarado

if type out c? or autocomplete work simple json {"ak", "al", "ar" ... }?

figured out:

$("#cat_statecode").autocomplete({     source: function (request, response) {         $.ajax({             url: "/cat/states/list",             datatype: "json",             data: {                 style: "full",                 maxrows: 12,                 req_state_part: request.term             },             success: function (data) {                 response($.map(data, function (item) {                     return {                         label: item.code + ' - ' + item.name,                         value: item.code                     }                 }));                 //                            alert("data.code:" + data);             },             error: function (e) {                 alert("e.error:" + e.error);             }         });     },      minlength: 1,     select: function (event, ui) {         //alert("ui item:" + ui.item ? "selected: " + ui.item.label : "nothing selected, input " + this.value);  //todo: remove after dev      },      open: function () {         $(this).removeclass("ui-corner-all").addclass("ui-corner-top");     },      close: function () {         $(this).removeclass("ui-corner-top").addclass("ui-corner-all");     } }); 

in mvc catstatecontroller have this:

public jsonresult list(string stateabbreviation) {     string statenameorstatecodecontains = request.params["req_state_part"];     return json(db.states.where(state => state.name.contains(statenameorstatecodecontains) || state.code.contains(statenameorstatecodecontains)).tolist(), jsonrequestbehavior.allowget); } 

so looks doesn't sent term over, send on params make in data element. since can make pretty developers imagination. 1 thing trying create closure b/c have lot of different animals different states. , need create same autocomplete function each of them. need ask question how remove auto complete can call same function many different ids, or separate them out comma so: $("#cat_statecode,#dog_statecode,#penguin_statecode...").autocomplete({ ... ???

and believe answer second part in here. think insinuating add class or attribute applicable input tags , perform each on them , them lastly apply autocomplete $(this).autocomplete after each each iteration occurs.

found better way set input tag have class="cssclassname". had use textboxfor:

@html.textboxfor(model => model.cat.statecode,  new { @class = "statecodeautocomplete" })