Typeahead и Laravel не возвращают никаких результатов

Я пытаюсь настроить Typeahead.js, чтобы использовать его в качестве приложения автозаполнения в моем приложении Laravel. К сожалению, он не возвращает результатов каждый раз.

Я возвращаю данные заранее, чтобы воспользоваться преимуществами локального хранилища, поэтому в моем случае нет запросов к БД.

Маршрут:

Route::get('/', function () {
return view('welcome', ['treatments' => Treatment::orderBy('treatment')
->pluck('treatment', 'id')]);
});

Добро пожаловать

const treatments = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: '{{$treatments}}'
});

$('#bloodhound').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'treatments',
source: treatments,

templates: {
empty: [
'<div class="list-group search-results-dropdown"><div class="list-group-item">Nothing found.</div></div>'
],
header: [
'<div class="list-group search-results-dropdown">'
]

}
}).on('typeahead:selected', function (evt, item) {
$('#bloodhound').text(item.id);
});

Поле ввода:

<input type="search" name="treatment" id="bloodhound" class="form-control"placeholder="Find a treatment" autocomplete="off" required>

Выход из $treatments массив:

local: '{&quot;2&quot;:&quot;Treatment 1&quot;}'

В последнем разделе скрипта следует ввести значение выделения (ID) в поле ввода, но, к сожалению, это тоже не работает.

Большое спасибо.

0

Решение

Не строка local: '{&quot;2&quot;:&quot;Treatment 1&quot;}' кажется странным для вас?

Во-первых, он отправляется через htmlspecialchars и все ваши цитаты стали &quote;второе — значение local это строка Как вы думаете, typeahead может понять, что у вас здесь?

Решение: получите свою базу данных элементов и выведите их в кодировку json. Чтобы избежать кавычек, избегайте использования {!! !!}:

const treatments = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: {!! $treatments !!}
});

Маршрут:

Route::get('/', function () {
return view(
'welcome',
['treatments' => Treatment::orderBy('treatment')->pluck('treatment', 'id')->toJson()]
);
});
0

Другие решения

Других решений пока нет …