Я пытаюсь настроить 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: '{"2":"Treatment 1"}'
В последнем разделе скрипта следует ввести значение выделения (ID) в поле ввода, но, к сожалению, это тоже не работает.
Большое спасибо.
Не строка local: '{"2":"Treatment 1"}'
кажется странным для вас?
Во-первых, он отправляется через htmlspecialchars
и все ваши цитаты стали "e;
второе — значение 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()]
);
});
Других решений пока нет …