ASP MVC 3 - 使用键/值对来填充typeahead.js下拉列表

我想创建一个下拉列表，对于每个项目，在一行上列出一个代理名称和标识，以及一些辅助信息（正如你看到在typeahead.js demo page ASP MVC 3 - 使用键/值对来填充typeahead.js下拉列表

我试图从我的ASP MVC控制器的信息从我的视图，然后显示一条信息（代理的名字）开始简单。第二步，当我看着Fiddler中的请求时，我可以看到我创建了一个我需要正确使用的对象的数组，然后退出控制器方法而没有发生任何事件。那所有的t他需要的数据正在返回，并且格式正确。然而...

我已经看过几乎所有的教程，以及我似乎无法弄清楚如何正确显示信息。

这是我最近的尝试。我简化了一些事情，以便能够在数组中循环选择一个项目进行显示。

查看代码

<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script> 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script> 
<script type="text/javascript" src="http://blattchat.com/demos/typeahead/js/bootstrap-typeahead.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function ($) { 
     // Workaround for bug in mouse item selection 
     $.fn.typeahead.Constructor.prototype.blur = function() { 
      var that = this; 
      setTimeout(function() { that.hide() }, 250); 
     }; 

     $('#typeahead').typeahead({ 
      source: function (term, process) { 
       var url = '@Url.Content("~/Agent/GetAgents")'; 

       return $.getJSON(url, { term: term }, function (data) { 

        var agents = []; 
        var map = {}; 

        $.each(data, function (i, agent) { 
         map[agent.FirstName] = agent; 
         agents.push(agent.FirstName); 
        }); 

        return process(agents); 
       }); 
      }, 
      select: function (event, ui) { 
       $.post('@Url.Action("Details","Agent")', { id: atrVal }); 
      } 
     }); 
    }) 
</script>

从控制器

public JsonResult GetAgents(string term) 
    { 

      term = term.ToUpper(); 

       var lastAgents = from l in db.Agent 
           where l.FirstName.Contains(term) || 
             l.LastName.Contains(term) 
           select new 
              { 
               Name = l.FirstName, 
               SymetraNumber = l.SymetraNumber, 
              }; 


       var corp2Agents = from c in db.Agent 
            where c.CorporateName.Contains(term) 
            select new 
            { 
             Name = c.CorporateName, 
             SymetraNumber = c.SymetraNumber, 
            }; 

       return new JsonResult() 
       { 
        Data = (lastAgents.Union(corp2Agents).ToArray()), 
        JsonRequestBehavior = JsonRequestBehavior.AllowGet 
       }; 
    }

这里的代码是什么通过Fiddler传回

enter image description here

同样的屏幕截图，我不是在Visual Studio或Chrome的调试器中看到任何错误消息所以我想我只是不正确的jQuery

来源

2013-04-22 NealR

固定使用的语法

 $('#typeahead').typeahead({ 
      source: function (term, process) { 
       var url = '@Url.Content("~/Agent/GetAgents")'; 
       var agents = []; 
       map = {}; 

       return ($.getJSON(url, { term: term }, function (data) { 
        $.each(data, function (i, item) { 
         map[item.Name] = item; 
         agents.push(item.Name); 
        }); 

        process(agents); 
       })); 
      },

来源

2013-05-06 21:47:02 NealR

仅供参考处理数据：你正在使用的不是typeahead.js，这是自举typeahead.js 。不同的动物。 Bootstrap和Typeahead.js都来自Twitter。 Bootstrap 3.0已经放弃了对bootstrap-typeahead.js的支持，转而使用typeahead.js。也许这是你得不到多少帮助的原因之一？

来源

2013-09-11 18:37:45 Will

ASP MVC 3 - 使用键/值对来填充typeahead.js下拉列表

回答

相关问题