如何通过Twitter typeahed.js显示从远程服务器收到的数据

Question

我需要将DropDown更改为自动完成功能，并且我正在使用Twitter typeahed.js 我的问题是我在服务器上收到的自动填充字段中无法显示数据。

这是我的客户代码请求：

    $('.typeahead').typeahead({
            hint: true,
            highlight: true,
            minLength: 1
        },
        {
            remote: 'Home/MeteringSystemList?q=%QUERY',
            templates: {
                empty: [
                  '<div class="empty-message">',
                  'no results',
                  '</div>'
                ].join('\n')
            },
            source: function(query, process) {
                return $.get('/Home/MeteringSystemList', { query: query }, function(data) {
                    //var arr = $.map(data, function(result) { return result; });
                    var resultList = $.map(JSON.parse(data), function(item) {
                        var aItem = {
                            id: item.MeteringSystem_EntityInstanceID,
                            name: item.City + ", " + item.Address + ", " + item.MeteringType_ShortName
                                + " (" + item.FactoryNumber + ", " + item.HeatMeter_ModelName + ")"
                        };
                        return JSON.stringify(aItem);
                    });
                    console.log(resultList);
                    return process(resultList);

                });
            }
        });

这是我的服务器端代码，用于查找和过滤数据：

public JsonResult MeteringSystemList(string query)
    {
        //var list = new List<string[]>();
        string output = "";
        string userId = User.Identity.GetUserId();

        if(query != null)
        {
            using (var context = new MCSysContainer())
            {

            query = query.ToLowerInvariant();

                var result = from db in context.GetMeteringSystemsList(userId)
                    where db.Address.ToLowerInvariant().Contains(query) ||
                          db.City.ToLowerInvariant().Contains(query) ||
                          db.FactoryNumber.ToLowerInvariant().Contains(query) ||
                          db.HeatMeter_ModelName.ToLowerInvariant().Contains(query)
                    select db;
                output = new JavaScriptSerializer().Serialize(result);
            }
        }

        return Json(output , JsonRequestBehavior.AllowGet);
    }

在Chrome控制台中，我看到的数据类似于JSON-object，但我无法将其显示出来。

["{"id":53212,"name":"Минск, Курчатова, д.7, null (102911, TЭM-104-1)"}", "{"id":53214,"name":"Минск, Курчатова, д.7, null (1660, TЭM-05М)"}", "{"id":53267,"name":"Минск, Курчатова, д.7, null (1547730, TЭM-104-4)"}", "{"id":53268,"name":"Минск, Курчатова, д.7, null (1547730, TЭM-104-4)"}"]

我将非常感谢能帮助解决问题的任何帮助 感谢大家的关注和时间。

更新
我修改了客户端的代码。添加了Bloodhound引擎，它开始工作

var urldata = '@Url.Action("MeteringSystemList", "Home")' + '?query=%QUERY';


    var jsondataresult = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.whitespace,
        queryTokenizer: Bloodhound.tokenizers.whitespace,

        remote: {
            url: urldata,
            wildcard: '%QUERY',
            filter: function (response) {

                console.log(response);
                return $.map(JSON.parse(response), function (object) {

                    return {
                        id: object.MeteringSystem_EntityInstanceID,
                        name: object.City + ", " + object.Address + ", " + object.MeteringType_ShortName
                            + " (" + object.FactoryNumber + ", " + object.HeatMeter_ModelName + ")"
                    };

                });
            }
        }
    });

    $('#autocomplite').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    },
    {
        templates: {
            empty: [
                '<div class="empty-message">',
                'поиск не дал результатов',
                '</div>'
            ].join('\n')
        },
        displayKey: 'name',
        source: jsondataresult 
    }).on("typeahead:selected typeahead:autocompleted", function (e, data) {
        $("#meteringId").val(data.id);

    });
    $('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small');
    $('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large');  

除了一件事之外，它的工作正常。它建议只列出第一个项。