MVC4 AutoComplete DropDownList

See more:

C#

Javascript

MVC

jQuery

hello guys ,
I am trying to code an AutoComplete DrwopDown List and that is my code

This Is my Controller

public class ItemApiController : ApiController
   {
       //MedicaEntities dbMedica = new MedicaEntities();
       [HttpGet]
       public IEnumerable<Item> GetProducts(string query = "")
       {
           //IEnumerable<Item> items = dbMedica.Items.Where(fun => fun.LatinName.Contains(query));
           //return dbMedica.Items.Where(fun => fun.LatinName.Contains(query));
           using (var db = new MedicaEntities())
           {
               return String.IsNullOrEmpty(query) ? db.Items.ToList() :
               db.Items.Where(p => p.LatinName.StartsWith(query)).ToList();
           }
       }
   }

this is my view

@model  Medica.ViewModel.CompanyOrderItemModel

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

@{
    Layout = null;
}
@using (Html.BeginForm())
{
    @Html.HiddenFor(m => m.Item.ItemID)
    <input type="text" id="search" placeholder="Search for a product" required />
    <input type="submit" value="Go" id="submit" />
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

<script type="text/javascript">
    var url = '@Url.RouteUrl("DefaultApi", new { httproute = "", controller = "ItemApi" })';
    $('#search').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: url,
                data: { query: request.term },
                dataType: 'json',
                type: 'GET',
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.LatinName,
                            value: item.ID
                        }
                    }));
                }
            })
        },
        select: function (event, ui) {
            $('#search').val(ui.item.label);
            $('#Id').val(ui.item.value);
            return false;
        },
        minLength: 3
    });
</script>

the problem is when i typing 3 digits and put Beack Point in the function GetProducts to prove if it will be called or not but it work fine and the Script call the function but the problem is the auto complete show nothing to select it from although the function GetProducts returns a list , how can i solve this issue
thanks in advanced .