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

Posted 2023-02-16

【中文标题】即使查询返回结果，Twitter-typeahead 也不显示任何结果

【英文标题】：Twitter-typeahead shows no results even if the query returns results

【发布时间】：2019-11-11 05:18:29

【问题描述】：

经过一番研究，我无法解决我的问题。我正在使用 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();

回复截图：

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

【问题讨论】：

嗯，分配 $query 后转储它会得到什么？

实际上，当我查看网络响应​​时，它的工作原理.. 我的意思是结果即将到来，但由于某种原因，无论发生什么，提前输入都没有显示任何结果

你能发布一个你得到的 api 响应吗？

我已经上传了回复的截图

如果出现 javascript 错误，您是否检查过控制台？

【参考方案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 函数中进行解码。

【讨论】：

我会试试这个方法

【参考方案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 数据）

【讨论】：

网络响应非常好。使用 ajax 调用，响应会从 Laravel 以 json 形式返回。显示功能也很好并且与响应相匹配。我使用它的方式完全相同。