Twitter-typeahead не показывает результатов, даже если запрос возвращает результаты - PullRequest
Новая
       10

Twitter-typeahead не показывает результатов, даже если запрос возвращает результаты

6 голосов
/ 29 июня 2019

После некоторых исследований я не смог решить свою проблему.Я использую 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();
}

Снимок экрана отклика:

enter image description here

Может кто-нибудь предложить решение?

Ответы [ 2 ]

0 голосов
/ 08 июля 2019

Подсчет вашего комментария

На самом деле, когда я посмотрел на сетевой ответ, он работает

, этот вопрос не соответствует тэгам 'laravel' и 'eloquent'.Это гораздо ближе к тегу '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; }

выглядит как не готовый для указанного типа данных.

Итак, пожалуйста, внимательно прочитайте 2 совета @watercaymanи использовать их вместе

1) return json_encode($variants));

2)

не забудьте декодировать (данные json) внутри функции typeahead

0 голосов
/ 30 июня 2019

Если сеть что-то возвращает, это может быть так просто, как если бы вы не возвращали данные в формате, необходимом представлению. То есть, если бы это возвращало часть представления, вы бы хотели отправить весь поток как представление 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 при необходимости.

...