Click here to Skip to main content
14,870,660 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
hello guys ,
I am trying to code an AutoComplete DrwopDown List and that is my code

This Is my Controller
C#
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
HTML
@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 .
Posted
Updated 1-Jul-14 11:59am

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900