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?

Polyhistor

Hmm, what do you get when you dump $query after assigning it? – Tetradymite

Actually when i looked at the network response its working.. I mean the results are coming but for some reason the typeahead just shows no results no matter what – Polyhistor

Can you post an api response you are getting? – Taurus

i have upload the reponse's screenshot – Polyhistor

Did you check the console if a javascript error occurs? – Endoergic

No errors in console :D. If there was one at least i could go in search of that error. But in my case no errors anywhere. – Polyhistor

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.

Tetradymite

I will try this method – Polyhistor

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

Nepil

The network response is perfectly fine. With an ajax call the response is returned as json from Laravel. Also the display function is fine and matches the response. I use it exactly the same way. – Endoergic