即使查询返回结果，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>';
            }
        }
    });

});

控制器

public function br_number_search(Request $request)
{
    $query = $request['query'];

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

回复截图：

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

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 函数中进行解码。

Answer 2

统计你的评论

实际上，当我查看网络响应​​时，它的工作原理

这个问题不适合“laravel”和“雄辩”的标签。 它更接近标记“javascript”，当然标记“jquery”因为 typeahead.js 是 jQuery 插件。

您的查询

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

返回集合对象，但是JS代码

display: function(data) { return data.br_no+' '+data.variants_name.toUpperCase()+' '+data.case_bottles.quantities; }

看起来还没有为提到的数据类型做好准备。

所以，请仔细阅读@watercayman 的 2 条建议并将它们一起使用

1) return json_encode($variants));

2)

记得在你的 typeahead 函数中解码（json 数据）