How to force a searchbar search when page load?

Questions
1

I have a seachbar and it works as it should.
But I would like to make a search with a click on different buttons also. So when I click a button then it sorts by the button data-search=“table” or something like that.

My searchbar looks like this.

<div class="searchbar searchbar-inline searchbar-init" data-search-container=".list" data-search-in=".searchthis" >
      <div class="searchbar-input-wrap">
        <input type="search" id="produkter-searchbar" placeholder="Sök">
        <i class="searchbar-icon"></i>
        <span class="input-clear-button"></span>
      </div>
    </div>

So to test if I can make it search on page load, I have app.searchbar.search('.searchbar', 'table'); when the page loads.

I thought that app.searchbar.search('.searchbar', 'table'); would search for “table”?

That it would force a search ? What am I missing here?

Thanks.

2

Just to check, did you also run app.searchbar.create?

3

No I didn´t. I didn´t think I needed to when I init it with <div class="searchbar searchbar-inline searchbar-init"?

But I added it now. So on page init I have.

var searchbar = app.searchbar.create({
  el: '.searchbar',
  searchContainer : '.list',
  searchIn : '.searchthis',
  on: {
    enable: function () {
      console.log('Searchbar enabled')
    }
  }
});

app.searchbar.search(’.searchbar’, ‘table’);

And now it selects all the “tables” :slight_smile:
Thanks kerrydp!

4

Yes according to the docs, if you want to use the SearchBar API, you need to initialise it in code first (not using the auto-init)

5

where exactly did you see that on docs?

if you go to => https://framework7.io/kitchen-sink/core/
open console
and type =>

app.searchbar.search('.searchbar', 'table');

will give you:

Data Table
Sortable List

searchbar works like any other component

6

From https://framework7.io/docs/searchbar.html#searchbar-behavior-classes:

If you don’t need to use Searchbar API and your Searchbar is inside of the page and presented in DOM on moment of page initialization then it can be auto initialized with just adding additional searchbar-init class

Thus, if you do need to use the API, you need to initialise it through Javascript. Or at least, that’s the way I would comprehend that statement.