[F7-SVELTE] Searchbar and Non Listitem

Questions
1 
 <Searchbar class="searchbar-x" 
         searchContainer=".source"
         searchIn=".x"
         disableButton={!theme.aurora}
         onSearchbarSearch={searchKeyword}
         inline   init  clearButton></Searchbar>
 
   <List class="searchbar-not-found">
     <ListItem title="Nothing found"></ListItem>
   </List>

–Works with this:

<List class="source">
<ListItem class="x" title="1">A</ListItem>
<ListItem class="x" title="2">B</ListItem>
<ListItem class="x" title="3">C</ListItem>
<ListItem class="x" title="4">D</ListItem>
<ListItem class="x" title="5">E</ListItem>
<ListItem class="x" title="6">F</ListItem>
<ListItem class="x" title="7">G</ListItem>
</List>

– But not this:

<div class="source">
<div class="x" title="1">A</div>
<div class="x" title="2">B</div>
<div class="x" title="3">C</div>
<div class="x" title="4">D</div>
<div class="x" title="5">E</div>
<div class="x" title="6">F</div>
<div class="x" title="7">G</div>
</div>

– or this…

<bookcase class="source">
<book class="x" title="Test 1">The first book of tests..</book>
<book class="x" title="Test 2">The second book of tests..</book>
</bookcase>

The divs/books disappear on typing in the searchbar, but doesn’t return valid searches… just blank. I tried switching around searchIn / searchItem which didn’t do anything. are the above two methods possible?

Oni

2

You also need to set correct searchItem prop https://framework7.io/svelte/searchbar.html#searchbar-properties

3

so in this:

<bookcase class="source">
<book class="x" title="Test 1">The first book of tests..</book>
<book class="x" title="Test 2">The second book of tests..</book>
</bookcase>

… with this

 >  <Searchbar class="searchbar-x" 
 >          searchContainer="bookcase"
 >          searchIn="book" searchItem=".item-title"
 >          disableButton={!theme.aurora}
 >          onSearchbarSearch={searchKeyword}
 >          inline   init  clearButton></Searchbar>

Should work?

4

No, there should be CSS selectors of actual HTML elements, not custom components

5

I tried this, and it didn’t work either… I really am sorry for being obtuse about this…

   <Searchbar class="searchbar-x" 
           searchContainer=".source"
           searchIn=".x" searchItem=".item-title"
           disableButton={!theme.aurora}
           onSearchbarSearch={searchKeyword}
           inline   init  clearButton></Searchbar>