hello guys ,
I am trying to code an AutoComplete DrwopDown List and that is my code
This Is my Controller
public class ItemApiController : ApiController
{
[HttpGet]
public IEnumerable<Item> GetProducts(string 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 .