Searchbar for non list items?

1

Can the searchbar filter for non-list items? In my example I have a series of expanding cards I would like it to work on. The card component from the below example has the class of “card-header-text” as the text I want to search in.

Example:

<f7-navbar title="Explore" large title-large transparent>
  <f7-nav-right><f7-block>
  <f7-link class="searchbar-enable" data-searchbar=".searchbar-demo" icon-ios="f7:search" icon-aurora="f7:search" icon-md="material:search"></f7-link></f7-block>
</f7-nav-right>
<f7-searchbar
  class="searchbar-demo"
  expandable
  search-container=".search-list"
  search-in=".card-header-text"
  :disable-button="!$theme.aurora"
></f7-searchbar>
</f7-navbar>
<f7-list class="searchbar-not-found">
<f7-list-item title="Nothing found"></f7-list-item>
<f7-button large>+ Add new</f7-button>
</f7-list>

<div class="row">
<div class="col-100 medium-50 search-list searchbar-found" v-for="book of books" :key="book['.key']">
<bookCard :bookTitle='book.search' :author='author.uid'/>
</div>
</div>
2

Yes, it can be specified in search-item prop https://framework7.io/vue/searchbar.html#searchbar-properties , e.g. search-item=".my-custom-element"

3

Thanks @nolimits4web - I had misread that as only applicable for li items. I’ve updated as per your comment (swapping search-in for search-item), it’s not displaying the “not found” content but also not filtering out the other results. Any other tricks up your sleeve you might know of?