Question

我正在尝试创建一个下拉列表，对于每个项目，在一行中列出代理名称和ID，以及下面一行中的一些辅助信息（就像您在typeahead.js demo page中看到的那样。< / p>

我试图通过将信息从我的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

返回的内容的屏幕截图

enter image description here

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

中正确处理数据

Answer 1

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

Answer 2

使用此语法修复

        $('#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);
                }));
            },

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

2 个答案: