using autocomplete in mvc application

Question

I want to use autocomplete input in my application WEB:

 

in my view I use this code :

@using (Html.BeginForm(null, null, FormMethod.Post))
{
<input type="text" id="txtCustomer" name="CustomerName" />
<input type="hidden" id="hfCustomer" name="CustomerId" />
}

my code javascript:

$("#txtCustomer").autocomplete({
source: function (request, response) {
$.ajax({
url: '/Service/AutoComplete/',
data: { "prefix": request.term },
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data, function (item) {
//debugger;
console.log(item);
return item;
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (event, ui) {
$("#hfCustomer").val(ui.item.value);
$("#hfCustomer").val(ui.item.id);
},
minLength: 1
});

the controller nammed ServiceController

[HttpPost]
public JsonResult AutoComplete(string prefix)
{
var db = new GestionCourrierEntities();
var services = (from customer in db.Service
where customer.DesignationService.StartsWith(prefix)
select new
{
label = customer.DesignationService,
val = customer.CodeService
}).ToList();
return Json(services);
}

my data

 

 

 

when I execute my application

 

I fill in input text : Dir

 

comman console.log(item); give me

{label: "Direction v", val: 1}

{label: "Direction A", val: 2}

 

that good

 

but this result don't appear in my view

 

thanks for help