
Untitled
By: a guest on
May 29th, 2012 | syntax:
None | size: 2.30 KB | hits: 15 | expires: Never
jQuery UI Autocomplete with MVC fails to display the items returned
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> google.load("jquery", "1.6.4")</script>
<script type="text/javascript"> google.load("jqueryui", "1.8.16")</script>
<script type="text/javascript">
$(document).ready(function () {
$("#clientEntered").autocomplete({
source: '@Url.Action("ClientAutoSuggest", "Clients")'
});
});
</script>
<input type="text" name="clientEntered" id="clientEntered" />
public JsonResult ClientAutoSuggest(string term)
{
var filteredClients = (from c in clientService.GetClients()
where c.Name.ToLower().StartsWith(term.ToLower())
select new { ClientID = c.ClientID, Name = c.Name }).Take(10);
return Json(filteredClients, JsonRequestBehavior.AllowGet);
}
[{"ClientID":1,"Name":"Client 1"},{"ClientID":2,"Name":"Client 2"}]
<ul style="z-index: 1; top: -16px; left: 0px; display: block; width: 1864px; position: relative;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all"><li></li><li></li></ul>
$("#clientEntered").autocomplete({
source: function(request, response) {
$.ajax({
url: '@Url.Action("ClientAutoSuggest", "Clients")',
data: request,
dataType: "json",
type: "POST",
success: function(data){
response($.map(data,function(item){
return { label: item.Name,value: item.Name, id: item.ClientId }
}));
}
});
},
});
$("#clientEntered").autocomplete({
source: function(request,response)
{
$.ajax({
url: "/Clients/ClientAutoSuggest",
type:"POST",
dataType:"json",
data: { term: request.term },
success:function(data){
response($.map(data,function(item){
return { label: item.Name,value: item.Name, id: item.ClientId
}))
}
})
}
});