Hi\ I use framework 7 for a mobile app and have problem with searcbar. The issue is searhbar work quickly and brings results before actually result result , in this case brings no results, and brings result only after I manuely go 1 character back with mouse , then it gets triggerred and brings previous result
In docs it is written that searchbar has this method search.search(query) which forces searchbar to search passed query but I do not know how will I manuelly access searchbar I created in theml html section with the code below ?
When I search for static data search works OK, problem comes when I search for an external directory which brings results few seconds later, I think issue it searchbar is not designed for external search, it searches static data well and in my case I need few seconds delay between search triggered and get the result… btw, I use an API for external search in my actions file and get results via state in a computed method.
I just tried to put the delay in computed method before returning search data , but it didnt help. I tried to put return statement inside setTimeout method or after it but didnt worked for me. (actually putting it inside it doesnt return anything)
f7-searchbar(disable-link-text="Cancel" search-container="#searchList" placeholder="Search in contacts" :clear-button="true" @searchbar:search="onSearch" @searchbar:enable="onEnable" @searchbar:disable="onDisable" @searchbar:clear="onClear")
search related methods
onSearch: function(query, found) {
if (query.value !== '') {
this.$store.dispatch('search', query.value);
}
setTimeout(() => {
//document.getElementById('f7-searchbar').search(query);
this.dene; // this.$store.dispatch('search', query.value);
}, 2000);
},
onClear: function(event) {
console.log('clear');
},
onEnable: function(event) {
this.isSearch = true;
console.log('enable');
},
onDisable: function(event) {
this.isSearch = false;
console.log('disable');
},
computed method
computed: {
...mapGetters(['contacts']), // not used anymore, instead store.state used
getContacts() {
var resultArray = [];
let contactSource = this.$store.state.contactSource;
if (contactSource === 'personal') {
let sortBy = this.$store.state.sortBy;
if (sortBy === 'firstName') {
this.contacts = _.sortBy(this.$store.state.contacts, [
function(o) {
return o.firstName;
},
]);
} else {
this.contacts = _.sortBy(this.$store.state.contacts, [
function(o) {
return o.lastName;
},
]);
}
return this.contacts;
} else {
setTimeout(() => {
return this.$store.state.directory;
}, 5000);
}
},