Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on May 29th, 2012  |  syntax: None  |  size: 2.30 KB  |  hits: 15  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. jQuery UI Autocomplete with MVC fails to display the items returned
  2. <script src="https://www.google.com/jsapi" type="text/javascript"></script>
  3. <script type="text/javascript">        google.load("jquery", "1.6.4")</script>
  4. <script type="text/javascript">        google.load("jqueryui", "1.8.16")</script>
  5. <script type="text/javascript">
  6.     $(document).ready(function () {
  7.         $("#clientEntered").autocomplete({
  8.             source: '@Url.Action("ClientAutoSuggest", "Clients")'
  9.         });
  10.     });
  11.  
  12. </script>
  13.  
  14. <input type="text" name="clientEntered" id="clientEntered" />
  15.        
  16. public JsonResult ClientAutoSuggest(string term)
  17.     {
  18.         var filteredClients = (from c in clientService.GetClients()
  19.                                where c.Name.ToLower().StartsWith(term.ToLower())
  20.                               select new { ClientID = c.ClientID, Name = c.Name }).Take(10);
  21.  
  22.         return Json(filteredClients, JsonRequestBehavior.AllowGet);
  23.     }
  24.        
  25. [{"ClientID":1,"Name":"Client 1"},{"ClientID":2,"Name":"Client 2"}]
  26.        
  27. <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>
  28.        
  29. $("#clientEntered").autocomplete({
  30.             source: function(request, response) {
  31.             $.ajax({
  32.               url: '@Url.Action("ClientAutoSuggest", "Clients")',
  33.               data: request,
  34.               dataType: "json",
  35.               type: "POST",
  36.               success: function(data){
  37.                   response($.map(data,function(item){
  38.                   return { label: item.Name,value: item.Name, id: item.ClientId }
  39.                   }));
  40.               }
  41.             });
  42.            },
  43.         });
  44.        
  45. $("#clientEntered").autocomplete({
  46.             source: function(request,response)
  47.             {
  48.                $.ajax({
  49.                  url: "/Clients/ClientAutoSuggest",
  50.                  type:"POST",
  51.                  dataType:"json",
  52.                  data: { term: request.term },
  53.                  success:function(data){
  54.                     response($.map(data,function(item){
  55.                       return { label: item.Name,value: item.Name, id: item.ClientId
  56.                     }))
  57.                  }
  58.  
  59.                 })
  60.             }
  61. });