Question

我试图将Twitter Typeahead集成到我的Laravel（4.2.11）项目中（使用Bootstrap 2.3.2）。
我将结果作为JSON返回（使用Fiddler检查），但是单个＆＃34;未定义＆＃34;总是显示。
如果我输入的搜索查询不会返回任何结果，那么＆＃34;无结果＆＃34;显示正确。

//Simple query in Laravel
Route::get('/sidebar/clients/{q}', function($q)
{
   $companies = DB::table('ViewCompanies')->select(array('CompanyID', 'FullCompanyName'))
                    ->where('FullCompanyName', 'like', '%'. $q .'%')->get();

   return Response::json(array('companies' => $companies));
});

//Javascript in page
var clients = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('FullCompayName'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: { 
        url: '/sidebar/clients/%QUERY',
        filter: function (parsedResponse) {
            // parsedResponse is the array returned from your backend
            console.log(parsedResponse);
            return parsedResponse;
        }            
    }
});

clients.initialize();

$('#clients .typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 3,
},
{
    name: 'clients',
    valueKey: 'CompanyID',
    displayKey: 'FullCompanyName',
    source: clients.ttAdapter(),
    templates: {
        empty: [
            '<div class="tt-empty-message">',
            'No Results',
            '</div>'
        ],
        header: '<h3 class="tt-tag-heading tt-tag-heading2">Matched Companies</h3>'
    }

});

我的控制台日志使用上面的代码：

Chrome Console Log

Answer 1

您正在记录的parsedResponse的输出是什么？我认为DB :: table返回一个对象，而不是一个数组。尝试替换这样的响应：

return Response::json(array('companies' => $companies->toArray()));

然后记录结果并将它们格式化为Bloodhound对象中的“filter”函数。希望它有所帮助！

Answer 2

感谢Eduardo让我知道需要将我的JSON解析为JS数组。

进行搜索后发现了这两个问题：

我可以从中设计我的单行解决方案（完全删除过滤器显示）：

        filter: function (parsedResponse) {
            console.log(parsedResponse);
            var parsedResponse = $.map(parsedResponse, function(el) { return el; });
            return parsedResponse;
        }

Typeahead.js JSON响应无法呈现

2 个答案: