Twitter-typeahead shows no results even if the query returns results

Question

After some research, I couldn't fix my problem. I'm using twitter-typeahead, and it's not showing results, but when I check the response in the network, it shows me the results. What could be the reason my typeahead doesn't show results even if there is a result in the query.

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>';
            }
        }
    });

});

Controller

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

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

Response Screenshot:

Can someone please suggest a solution?

Answer 1

If the network is returning something, it may be as simple as you are not returning the data in the format the view needs. IE if this were returning part of a view, you would want to send the whole stream as a Laravel view:

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

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

Since this is going back through an async pull, I think you probably just need to stringify it or json_encode the data so it transmits properly. Perhaps after getting $variants, something like:

return json_encode($variants));

Then just remember to decode inside your typeahead function if necessary.

Answer 2

Counting your comment

Actually when i looked at the network response its working

this question doesn't fits the tags 'laravel' and 'eloquent'. It's much closer to tag 'javascript' and of course tag 'jquery' as typeahead.js is jQuery plugin.

Your query

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

returns collection object, but the JS code

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

looks like not ready for mentioned data type.

So, please read carefully 2 advices by @watercayman and use them together

1) return json_encode($variants));

2)

remember to decode (json data) inside your typeahead function