How can I programmatically trigger the searchbar?

1

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);
      }
    },
2

No, it is a bit wrong approach. By default, Searchbar does the search by already rendered list. If you have data from other place (like you are doing an XHR request) or any async request, then you should use customSearch and render data manually. In your case, if use Vue it should be even easier. So you need to enable customSearch and render items in list based on search query that you have by searchbar

3

thanks, I found an example like this, and I have already onSearch method, cant understand logic here\ other than adding customSearch property what should I do ?

It says “You need to initialize the search bar with the customSearch option set to true” and hen creates searchBar in the code instead of html section, cant understand that.

var searchBar = myApp.searchbar('.searchbar', {
    customSearch: true,
    onSearch: function(s) {
        console.log('Searching', s);
    },
    onClear: function(s) {
        console.log('Clearing', s);
    }
});
5

Can you just give an example how can I use query with search ? btw, I use same searchbar both for static (already rendered list) search and async search, how can I do it ?

6

Example you found is for v1. Here is how you usually do the things in Vue:

<template>
  ...
  <f7-searchbar custom-search @searchbar:search="onSearch"></f7-searchbar>
  ...
  <f7-list>
    <f7-list-item v-for="item in foundItems">...</f7-list-item>
  </f7-list>
  ...
</template>

<script>
export default {
  data() {
    return {
      foundItems: [],
    };
  },
  methods: {
    onSearch(query) {
      // based on query set something to foundItems array
    },
  },
}
</script>
7

So I should use search-container for searchbar ?

and inside onSearch(query) method, I will have to to get results from API call then ?

8

No, they are not connected and shouldn’t be in this case

9

so I have this and onSearch method in methods, and use computed property instead of data, shouldn the list be updated everytime state value changed ? but still same problem continue, changes only after I go back one character

f7-searchbar(customSearch=true, disable-link-text="Cancel" placeholder="Search in contacts" :clear-button="true" @searchbar:search="onSearch" @searchbar:enable="onEnable" @searchbar:disable="onDisable" @searchbar:clear="onClear")
10

I solved the issue by putting a buffer before API search, I am not sure whether the issue is related to custom search., it goes to onSeach method anyway …?

setTimeout(() => {this.$store.dispatch('search', query.value);}, 2000);