I am trying to setup Typeahead.js, to use as an autosuggestion feature on my Laravel app. Unfortunately, it returns no results, each time.
I return the data beforehand to take advantage of local storage, so there is no querying the DB in my instance.
Route:
Route::get('/', function () {
return view('welcome', ['treatments' => Treatment::orderBy('treatment')
->pluck('treatment', 'id')]);
});
Welcome view:
const treatments = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: ''
});
$('#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 field:
<input type="search" name="treatment" id="bloodhound" class="form-control"
placeholder="Find a treatment" autocomplete="off" required>
Output of $treatments
array:
local: '{"2":"Treatment 1"}'
The last section of the script, should enter the value of the selection (ID ) within the input field, but unfortunately that doesn't work either.
Many thanks.
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire