Level 51
Anyone else encountered this problem and how did you fix?
Nov 23, 2018
5
Level 51
Bootstrap Typeahead select
Hi all,
I can't seem to get my code to work so when a user selects from the autocomplete it enters into the input.
Heres the code:
// JS
let path = "{{ url('search/landlord') }}";
$('#search').typeahead({
minLength: 3,
source: function (query, process, ) {
return $.get(path, { query: query }, function (data) {
return process(data);
});
},
select: function( ui, item ) {
console.log(item);
}
});
// HTML
<input type="text" class="form-control" name="term" id="search" placeholder="Start typing something to search..." data-provide="typeahead" autocomplete="off">
So things like ui.item.value & ui.item.name also show undefined.
Both console.log(item); and console.log(ui); shows as undefined... Any suggestions on whats wrong or what I may have missed.
Level 1
Possible solution (different library): https://github.com/devbridge/jQuery-Autocomplete
<script src="/js/autocomplete/jquery.autocomplete.min.js"></script>
<script>
$('#quick_search_name').devbridgeAutocomplete({
serviceUrl: '<?php echo route('search.contact');?>',
orientation: 'top',
onSelect: function (suggestion) {
globalContactCard(suggestion);
$('#quick_search_name').val('');
}
});
</script>
Level 51
Will have a look at this thanks, but surely $('#quick_search_name').val(''); would just get the value from what is typed rather than what is shown from the autocomplete?
Level 1
Actually that just blanks out the input field after they click on the value they want. The data is in the suggestion variable.. i.e. you could do console.log(suggestion.fieldname); i.e. JSON coming back from the request.
Level 51
Ok, cool. I'll check this out. Thanks dude :)
Please or to participate in this conversation.