Typeahead.js无结果显示：POST远程获取邮政编码无法渲染下拉选项

看起来你已经成功通过POST请求拿到了目标数据，但问题出在异步结果的回调处理逻辑上。Typeahead的source函数里，syncResults是专门用来返回同步结果的回调，而你的POST请求属于异步操作，必须用对应的异步回调来传递结果，才会触发下拉列表的渲染。

问题根源 #

你当前把异步获取的结果传给了syncResults，但这个回调仅负责同步数据的处理流程，不会通知Typeahead更新前端的下拉选项。所以哪怕控制台能打印出正确数据，页面也不会显示可选择的结果。

修复后的代码 #

$('#txtPostalCode').typeahead(null, {
    name: 'txtPostalCode',
    displayKey: 'suggestions',
    minLength: 3,
    source: function (query, callback) { // 将syncResults替换为通用的callback参数
        $.post('/hotbed/sggl/getpipedaddresses', {searchItem: query}, function (data) {
            var processedResults = $.map(data, function (item) {
                console.log(item.suggestions);
                return item;
            });
            callback(processedResults); // 用callback传递异步获取的结果
        }, 'json');
    }
});

关键修改说明 #

• 把source函数的第二个参数从syncResults改为callback（参数名可自定义，但要和后续调用对应）
• 在POST请求的成功回调中，将处理好的结果数组传给callback，而非syncResults

这样Typeahead就能正确接收异步返回的数据，并渲染出对应的下拉选项了。另外可以再确认两个细节：

• 后端返回的data确实是包含多个对象的数组（从你控制台的输出来看是符合要求的）
• displayKey: 'suggestions'配置正确，因为每个返回对象的显示字段就是suggestions

内容的提问来源于stack exchange，提问作者cwhisperer