使用远程数据源时Twitter typeahead.js无法正常初始化及工作问题

问题1：Limit设为25却只显示5条 #

Typeahead的limit是数据集专属配置项，而非全局配置。你把limit:25写在第一个全局配置对象里会被忽略，默认仍用数据集的默认值5。需要将limit移到第二个数据集配置对象中。

问题2：result(suggestions)因syncCalled=true被跳过 #

你的异步source存在逻辑问题：

• Typeahead的异步source函数不需要返回jqXHR对象，这会导致组件误判为同步调用，提前触发syncCalled标记，跳过后续的result回调。
• 直接移除return jQuery.ajax(...)的返回语句即可修正这个问题。

问题3：无样式下拉框 #

不要修改Typeahead库代码，这会破坏组件的DOM结构与样式绑定逻辑。只需引入对应版本的官方配套CSS文件（如typeahead.css），或基于Bootstrap的bootstrap-typeahead.css，就能让下拉框正常加载样式。

修改后的完整代码 #

jQuery('input#test').typeahead(
    {
        hint: true,
        highlight: true,
        minLength: 3
    },
    {
        name: 'customLookup',
        limit: 25, // 将limit移至数据集配置中
        source: function(query, result) {
            // 不要返回ajax对象，避免Typeahead误判为同步调用
            jQuery.ajax({
                url: url, // 你的动态接口地址
                data: 'shop_name=' + query + "&limit=25",
                dataType: "json",
                type: "post",
                success: function(data, textStatus, xhr) {
                    var suggestions = [];
                    
                    jQuery.map(data.data, function(item){
                        suggestions.push(item.name + " - " + item.address);
                    });

                    result(suggestions); // 现在不会被syncCalled拦截
                    console.log(suggestions);
                },
                error: function (request, status, error) {
                    alert(error);
                }
            });
        }
    });

额外注意事项 #

• 确认使用Typeahead的最新稳定版，旧版本可能存在异步source的逻辑bug。
• 检查后端接口是否正确接收limit=25参数，确保返回的数据集数量符合预期。
• 样式文件需与Typeahead版本匹配，避免版本差异导致样式失效。

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