I would like to use the javascript typeahead bloodhound but it's not working properly with a remote.
Here is my Javascript code :
<script type="text/javascript">
jQuery(document).ready(function($) {
var clubs = new Bloodhound({
datumTokenizer: function () {
return Bloodhound.tokenizers.obj.whitespace;
},
queryTokenizer: function () {
return Bloodhound.tokenizers.whitespace;
},
remote: {
url: "{{ url('club/listall') }}"+'/%QUERY%',
filter: function(searchClubs) {
console.log(searchClubs);
return searchClubs;
},
wildcard: "%QUERY%"
},
});
$(".club-search").typeahead({
hint: true,
highlight: true,
minLength: 1
}, {
source: clubs.ttAdapter(),
name: 'clubsList',
templates: {
empty: [
'<div class="list-group search-results-dropdown"><div class="list-group-item">Aucun club trouvé.</div></div>'
],
header: [
'<div class="list-group search-results-dropdown">'
],
suggestion: function (data) {
return '<a href="{{ url('club') }}' + '/' + data.id + '" class="list-group-item"><span class="row">' +
'<span class="avatar">' +
'<img src="{{asset('/')}}' + blason + '">' +
"</span>" +
'<span class="name">' + data.name + '<br><small style="color:grey;">(Ligue ' + data.league_name + ')</small></span>' +
"</span>"
}
}
});
});
</script>
But its not working completely properly... In general, it finds results, but I'll give u an example of a search query. One possible query is "montagnarde". I'll give you the result for every letter. Typing:
m --> lot of results
mo --> lot of results
mon --> lot of results
mont --> lot of results
monta --> lot of results
montag --> lot of results
montagn --> lot of results
montagna --> no result
montagnar --> finds only "J.S. MONTAGNARDE"
montagnard --> finds only "J.S. MONTAGNARDE"
montagnarde --> finds only "J.S. MONTAGNARDE" and "LA MONTAGNARDE"
montagnarde i --> finds only "U.S. MONTAGNARDE INZINZAC"
And the console.log(searchClubs) gives me different result.
Does anybody see where is the problem? Thank you in advance!
