Ok I solved this problem. Since I use custom expandable searchbar, once it enabled, I initialize my typeahead autocomplete the important thing is I need to open the autocomplete to trigger the autocomplete element has a default UL > LI which is the default autocomplete placeholder text otherwise it throws an error $dropdown element ul not found and destroy it on searchbar disable. I dont know if this is a better approach @nolimits4web but it helps me right now
Thank you,
Hi,
How did you do this?
Can you show us the code. We all are struggling.
mounted(){
const self = this;
const app = self.$f7;
self.initSearchbar();
},
methods: {
initSearchbar(){
const self = this;
const app = self.$f7;
const $$ = self.$$;
const $el = $$(self.$el);
var q = '';
var searchbar = app.searchbar.create({
el: '#searchbar-autocomplete',
customSearch: true,
on: {
enable() {
setTimeout(() => {
if (app.theme === 'ios') {
$$('#searchbar-autocomplete').css('overflow', 'visible');
} else {
$$('#searchbar-autocomplete').parents('.navbar-inner').css('overflow', 'visible');
$$('#searchbar-autocomplete').find('.searchbar-input-wrap').css('overflow', 'visible');
}
self.initAutocomplete();
}, 400);
},
disable() {
if (app.theme === 'ios') {
$$('#searchbar-autocomplete').css('overflow', '');
} else {
$$('#searchbar-autocomplete').parents('.navbar-inner').css('overflow', '');
$$('#searchbar-autocomplete').find('.searchbar-input-wrap').css('overflow', '');
}
app.autocomplete.destroy(self.searchAutocomplete);
},
}
});
},
initAutocomplete(){
const self = this;
const app = self.$f7;
const $$ = self.$$;
const $el = $$(self.$el);
let q = '';
self.searchAutocomplete = app.autocomplete.create({
inputEl: 'input[type="search"]',
openIn: 'dropdown',
placeholder: true,
valueProperty: 'name',
textProperty: 'name',
dropdownPlaceholderText: 'Search"',
typeahead: true,
minLength: 2,
notFoundText: 'No record found',
source: function (query, render) {
var autocomplete = this;
var results = [];
if (query.length < 2) {
render(results);
return;
}
q = query;
autocomplete.preloaderShow();
self.$store.dispatch('product/getSearch', {
q: query
}).then((response)=>{
var data = response.results;
for(var d in data){
for(var i = 0; i < data[d].length; i++){
if(d == 'categories'){
data[d][i]['type'] = 'category'
}else if(d == 'stores'){
data[d][i]['type'] = 'store'
}else{
data[d][i]['type'] = 'product'
}
results.push(data[d][i]);
}
}
autocomplete.preloaderHide();
render(results);
});
},
renderItem: function(item, index){
var that = this,
items = this.items;
var obj = self.$utils.extend(item, items[index]),
tmpl = '';
if(obj.placeholder){
return '<li>'+
'<label class="item-radio item-content" data-value="Search">'+
'<div class="item-inner">'+
'<div class="item-title">Type a keyword to search</div>'+
'</div>'+
'</label>'+
'</li>';
}
if(obj.type == 'category'){
tmpl = '<li>'+
'<label class="item-radio item-content" data-value="'+obj.name+'">'+
'<div class="item-inner">'+
'<div class="item-title"><strong>'+q.capitalize()+'</strong> di kategori '+convertAmpersand(obj.name)+'</div>'+
'</div>'+
'</label>'+
'</li>';
}else if(obj.type == 'product'){
tmpl = '<li>'+
'<label class="item-radio item-content" data-value="'+convertAmpersand(obj.name)+'">'+
'<div class="item-media"><img src="'+obj.photo+'" width="32"/></div>'+
'<div class="item-inner">'+
'<div class="item-title"><strong>'+obj.name.capitalize()+'</strong></div>'+
'<div class="item-after"><strong>Rp '+obj.price.format(0,0,'.',',')+'</strong></div>'+
'</div>'+
'</label>'+
'</li>';
}else{
var photo = obj.photo.indexOf('imgsizer') > -1 ? '<img src="'+obj.photo+'" width="32"/>' : '<span data-letter-tiny="'+ obj.photo+'"></span>';
tmpl = '<li>'+
'<label class="item-radio item-content" data-value="'+convertAmpersand(obj.name)+'">'+
'<div class="item-media">'+photo+'</div>'+
'<div class="item-inner">'+
'<div class="item-title"><strong>'+convertAmpersand(obj.name).capitalize()+'</strong></div>'+
'<div class="item-after"><strong>Visit Store<i class="display-inline-block icon f7-icons" style="font-size: 20px;">arrow_right</i></strong></div>'+
'</div>'+
'</label>'+
'</li>';
}
return tmpl;
},
on: {
change: function(value){
var value = value[0];
if(value.type == 'category'){
self.$f7router.navigate('/products/category/'+value.path+'/');
}else if(value.type == 'product'){
self.$f7router.navigate('/product/'+value.id+'/');
}else{
self.$f7router.navigate('/store/'+value.user_id+'/');
}
$el.find('input[type="search"]').val(q);
}
}
});
app.autocomplete.open(self.searchAutocomplete);
$$(document).on('keydown', 'input[type="search"]', function(e){
if(e.keyCode == 13){
var q = $$(this).val().trim();
self.$f7router.navigate('/products/search/'+q+'/');
}
});
}