即使查询返回结果，Twitter-typeahead也不会显示任何结果

Question

经过研究，我无法解决问题。我正在使用twitter-typeahead，它没有显示结果，但是当我检查网络中的响应时，它显示了结果。即使查询中有结果，我的预输入也不显示结果的原因可能是什么？

的HTML

<input class="form-control typeahead" type="text" name="variant"
                                    placeholder="Search by BRNO,variant ..." />

的JavaScript

$(document).ready(function(){

    var Variants = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.whitespace,
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: '/sales/br-number/search?query=%QUERY%',
            wildcard: '%QUERY%',
            cache: false,
        },
    });

    $('.typeahead').typeahead(null, {
        hint: true,
        highlight: true,
        source: Variants,
        display: function(data) {
            return data.br_no+' '+data.variants_name.toUpperCase()+' '+data.case_bottles.quantities;
        },
        templates: {
            empty: [
            '<div class="empty-message">',
                'No Results',
            '</div>'
            ].join('\n'),
            suggestion: function(data) {
                return '<p><strong>' + data.br_no + '</strong> '+ data.variants_name +' <strong>' + data.case_bottles.quantities + '</strong> </p>';
            }
        }
    });

});

控制者

<input class="form-control typeahead" type="text" name="variant"
                                    placeholder="Search by BRNO,variant ..." />

响应截图：

有人可以提出解决方案吗？

Answer 1

如果网络返回某些内容，则可能很简单，因为您没有以视图所需的格式返回数据。IE 如果返回视图的一部分，您可能希望将整个流作为 Laravel 视图发送：

$variants = Variant::with('case_bottles', 'product')
    ->where('br_no', 'LIKE', "%$query%")
    ->get();

return view('something', compact('variants'));

由于这是通过异步拉取返回的，我认为您可能只需要对其进行字符串化或对数据进行 json_encode，以便其正确传输。也许在得到之后$variants，类似：

return json_encode($variants));

然后，如果有必要，请记住在 typeahead 函数内进行解码。