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

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

Скриншот ответа:

введите здесь описание изображения

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


person Lano Angel    schedule 29.06.2019    source источник
comment
Хм, что вы получаете, когда выгружаете $query после его назначения?   -  person Watercayman    schedule 30.06.2019
comment
На самом деле, когда я посмотрел на сетевой ответ, он работает. Я имею в виду, что результаты идут, но по какой-то причине ввод текста просто не показывает результатов, несмотря ни на что.   -  person Lano Angel    schedule 30.06.2019
comment
Можете ли вы опубликовать ответ API, который вы получаете?   -  person Kathak Dabhi    schedule 04.07.2019
comment
я загрузил скриншот ответа   -  person Lano Angel    schedule 04.07.2019
comment
Вы проверяли консоль, возникает ли ошибка javascript?   -  person shock_gone_wild    schedule 05.07.2019
comment
В консоли ошибок нет :D. Если бы была хотя бы одна, я мог бы поискать эту ошибку. Но в моем случае ошибок нигде нет.   -  person Lano Angel    schedule 07.07.2019


Ответы (2)


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

person Watercayman    schedule 30.06.2019
comment
попробую этот метод - person Lano Angel; 30.06.2019

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

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

этот вопрос не подходит к тегам «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; }

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

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

1) return json_encode($variants));

2)

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

person Vlad    schedule 08.07.2019
comment
Сетевой ответ в полном порядке. При вызове ajax ответ возвращается как json от Laravel. Также функция отображения в порядке и соответствует ответу. Я использую его точно так же. - person shock_gone_wild; 09.07.2019