0

我正在尝试创建一个下拉列表，对于每个项目，在一行中列出代理名称和 ID，并在下面的行中列出一些辅助信息（就像您在typeahead.js 演示页面中看到的一样。

我试图通过将信息从我的 ASP MVC 控制器传递到我的视图来开始简单，然后显示一条信息（代理的名字）。当我逐步执行代码时，我可以看到我正确地创建了一个我需要的对象数组，然后顺利退出控制器方法。

其次，当我查看 Fiddler 中的请求时，我可以看到我需要的所有数据都以正确的格式返回。然而...

我也看过几乎所有教程，但我似乎无法弄清楚如何正确显示信息。

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

查看代码

<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 返回的屏幕截图

在此处输入图像描述

同样，我在 Visual Studio 或 Chrome 的调试器中都没有看到任何错误消息，所以我认为我只是没有在jQuery

4

2 回答 2

1

仅供参考：您使用的不是 typeahead.js，而是 bootstrap-typeahead.js。不同的动物。Bootstrap 和 Typeahead.js 都来自 Twitter。Bootstrap 3.0 已放弃对 bootstrap-typeahead.js 的支持，转而支持 typeahead.js。也许这就是你没有得到太多帮助的原因之一？

于 2013-09-11T18:37:45.390 回答
0

修复了使用此语法

        $('#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-06T21:47:02.473 回答