将 typeahead.js 与 Json 一起使用答案

【问题标题】：Using typeahead.js with Json将 typeahead.js 与 Json 一起使用
【发布时间】：2014-12-14 16:01:11
【问题描述】：

我正在关注this link，这是一篇关于 typeahead.js 和 Json 的非常清晰的博文。但是，我遇到了问题，无法弄清楚我哪里出错了。

这是我的 js：

<script type="text/javascript">
    $('#Search').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    },
    {
        name: 'states',
        displayKey: 'stateName',
        source: function (query, process) {
            states = [];
            map = {};

            var data = [
                { "stateCode": "CA", "stateName": "California" },
                { "stateCode": "AZ", "stateName": "Arizona" },
                { "stateCode": "NY", "stateName": "New York" },
                { "stateCode": "NV", "stateName": "Nevada" },
                { "stateCode": "OH", "stateName": "Ohio" }
            ];

            $.each(data, function (i, state) {
                map[state.stateName] = state;
                states.push(state.stateName);
            });

            process(states);
        },
        updater: function (item) {
            selectedState = map[item].stateCode;
            return item;
        }
    });
</script>

当我在输入控件中键入时，所有结果都以未定义的形式返回。我认为这与 displayKey 有关，我尝试将其设置为 state.stateName 但这会导致同样的问题。也许我在寻找错误的区域？

我已经设置了plnkr.co demo here.

感谢阅读。

保罗

【问题讨论】：

在您的演示中，浏览器控制台显示以下错误“未捕获的错误：Bootstrap 的 JavaScript 需要 jQuery”。你确定你的脚本元素是正确的吗？

标签： javascript asp.net-mvc json typeahead.js

【解决方案1】：

您需要更改 states.push 行，在您的 plunker 中它位于第 45 行。 Typeahead 需要 JSON 格式的结果，现在您只是推送结果。

将第 45 行更改为：

states.push({stateName : state.stateName});

现在你的 displayKey: "stateName" （这是 JSON 格式数据的键）将存在，它会显示状态的名称作为结果。

【讨论】：