Searchbar Not Searching component V2

Questions
1

i created an expandable searchbar but the search query keep giving me nothing found as aresult

my code

<div class="page">
    <div class="navbar">
        <div class="navbar-inner sliding">
            <div class="left panel-open link">
                <i class="icon fa fa-bars" style="margin-left: 20px;margin-right: 10px;font-size:30px"></i>
            </div>
            <div class="title">Gimbay</div>
            <div class="right">
                <!-- Link to enable searchbar -->
                <a class="link icon-only searchbar-enable" data-searchbar=".searchbar">
                    <i class="icon material-icons md-only">search</i>
                </a>
            </div>
            <!-- Searchbar is a direct child of "navbar-inner" -->
            <form class="searchbar searchbar-expandable searchbar-init searchbar-component" data-search-container=".search-list" data-search-in=".card-header">
                <div class="searchbar-inner">
                    <div class="searchbar-input-wrap">
                        <input type="search" placeholder="Search" />
                        <i class="searchbar-icon"></i>
                        <span class="input-clear-button"></span>
                    </div>
                    <span class="searchbar-disable-button">Cancel</span>
                </div>
            </form>
        </div>

    </div>
    <div class="fab fab-right-bottom">
        <a href="/add-categories/">
            <i class="icon fa fa-plus" style="font-size:20px"></i>
        </a>
    </div>
    <div class="page-content">
        <div class="searchbar-backdrop"></div>
        <div class="search-list searchbar-found">
            <a  href="/view-listing/" class="card">
                <div class="card-header">Hotels</div>
                <div class="card-content card-content-padding">
                    <img src="../res/item11.png" alt="image">
                </div>
                <div class="card-footer">Actions</div>
            </a>
            <a  href="/view-listing/" class="card">
                <div class="card-header">Engineering</div>
                <div class="card-content card-content-padding">
                    <img src="../res/item11.png" alt="image">
                </div>
                <div class="card-footer">Actions</div>
            </a>
            <a  href="/view-listing/" class="card">
                <div class="card-header">Fashion</div>
                <div class="card-content card-content-padding">
                    <img src="../res/item11.png" alt="image">
                </div>
                <div class="card-footer">Actions</div>
            </a>
            <a  href="/view-listing/" class="card">
                <div class="card-header">Health</div>
                <div class="card-content card-content-padding">
                    <img src="../res/item11.png" alt="image">
                </div>
                <div class="card-footer">Actions</div>
            </a>
            
        </div>
        <!-- Nothing found message -->
        <div class="block searchbar-not-found">
            <div class="block-inner">Nothing found</div>
        </div>
    </div>

</div>

</div>
2

You need to specify searchItem parameter or via data-search-item attribute http://framework7.io/docs/searchbar.html#searchbar-parameters because by default it searches through list items (li). So in you case it should probably be data-search-item="a.card"