[Solved] Help needed: Seachbar Example https://framework7.io/docs/searchbar.html

HI

I am new to this and am trying to learn through examples.

I used the example at https://framework7.io/docs/searchbar.html using the https://github.com/framework7io/framework7-template-tabs as a base.

The visuals are ok. However the search does not work. When I tested the f7 docs pages in console it was recording whatever I was typing. However this does not seem to do so in my example.

I’m really lost. I tried to follow the other replies but cannot make any sense out of my issue.

Index:

My App
<!-- Status bar overlay for fullscreen mode-->
<div class="statusbar"></div>
<!-- Left panel with cover effect-->
<div class="panel panel-left panel-cover theme-dark">
  <div class="view">
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Left Panel</div>
        </div>
      </div>
      <div class="page-content">
        <div class="block">Left panel content goes here</div>
      </div>
    </div>
  </div>
</div>
<!-- Right panel with reveal effect-->
<div class="panel panel-right panel-reveal theme-dark">
  <div class="view">
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Right Panel</div>
        </div>
      </div>
      <div class="page-content">
        <div class="block">Right panel content goes here</div>
      </div>
    </div>
  </div>
</div>

<!-- Views/Tabs container -->
<div class="views tabs safe-areas">
  <!-- Tabbar for switching views-tabs -->
  <div class="toolbar tabbar-labels toolbar-bottom">
    <div class="toolbar-inner">
      <a href="#view-home" class="tab-link tab-link-active">
        <i class="icon f7-icons ios-only">home</i>
        <i class="icon f7-icons ios-only icon-ios-fill">home_fill</i>
        <i class="icon material-icons md-only">home</i>
        <span class="tabbar-label">Home</span>
      </a>
      <a href="#view-catalog" class="tab-link">
        <i class="icon f7-icons ios-only">list</i>
        <i class="icon f7-icons ios-only icon-ios-fill">list_fill</i>
        <i class="icon material-icons md-only">view_list</i>
        <span class="tabbar-label">Catalog</span>
      </a>
      <a href="#view-settings" class="tab-link">
        <i class="icon f7-icons ios-only">settings</i>
        <i class="icon f7-icons ios-only icon-ios-fill">settings_fill</i>
        <i class="icon material-icons md-only">settings</i>
        <span class="tabbar-label">Settings</span>
      </a>
    </div>
  </div>
  <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
  <div id="view-home" class="view view-main tab tab-active">
    <!-- Page, data-name contains page name which can be used in page callbacks -->
    <div class="page" data-name="home">
      <!-- Top Navbar -->
      <div class="navbar">
        <div class="navbar-inner">
          <div class="left">
            <a href="#" class="link icon-only panel-open" data-panel="left">
              <i class="icon f7-icons ios-only">menu</i>
              <i class="icon material-icons md-only">menu</i>
            </a>
          </div>
          <div class="title sliding">Home</div>
          <div class="right">
            <a href="#" class="link icon-only panel-open" data-panel="right">
              <i class="icon f7-icons ios-only">menu</i>
              <i class="icon material-icons md-only">menu</i>
            </a>
          </div>
        </div>
      </div>

      <!-- Scrollable page content-->
      <div class="page-content">
        <div class="block block-strong">
          <p>This is an example of tabs-layout application. The main point of such tabbed layout is that each tab contains independent view with its own routing and navigation.</p>
          <p>Each tab/view may have different layout, different navbar type (dynamic, fixed or static) or without navbar like this tab.</p>
        </div>

        <div class="block-title">Navigation</div>
        <div class="list">
          <ul>
            <li>
              <a href="/about/" class="item-content item-link">
                <div class="item-inner">
                  <div class="item-title">About</div>
                </div>
              </a>
            </li>
          </ul>
        </div>

        <div class="block-title">Modals</div>
        <div class="block block-strong">
          <div class="row">
            <div class="col-50">
              <a href="#" class="button button-raised button-fill popup-open" data-popup="#my-popup">Popup</a>
            </div>
            <div class="col-50">
              <a href="#" class="button button-raised button-fill login-screen-open" data-login-screen="#my-login-screen">Login Screen</a>
            </div>
          </div>
        </div>

        <div class="block-title">Panels</div>
        <div class="block block-strong">
          <div class="row">
            <div class="col-50">
              <a href="#" class="button button-raised button-fill panel-open" data-panel="left">Left Panel</a>
            </div>
            <div class="col-50">
              <a href="#" class="button button-raised button-fill panel-open" data-panel="right">Right Panel</a>
            </div>
          </div>
        </div>

        <div class="block-title searchbar-hide-on-search">Page Loaders & Router</div>
        <div class="list links-list searchbar-hide-on-search">
          <ul>
            <li>
              <a href="/page-loader-template7/vladimir/123/about-me/1/?start=0&end=30#top">Template7 Page</a>
            </li>
            <li>
              <a href="/page-loader-component/vladimir/123/about-me/1/?start=0&end=30#top">Component Page</a>
            </li>
            <li>
              <a href="/load-something-that-doesnt-exist/">Default Route (404)</a>
            </li>
            <li>
              <a href="/request-and-load/user/123456/">Request Data & Load</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- Catalog View -->
  <div id="view-catalog" class="view tab">
    <!-- Catalog page will be loaded here dynamically from /catalog/ route -->
  </div>

  <!-- Settings View -->
  <div id="view-settings" class="view tab">
    <!-- Settings page will be loaded here dynamically from /settings/ route -->
  </div>
</div>

<!-- Popup -->
<div class="popup" id="my-popup">
  <div class="view">
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Popup</div>
          <div class="right">
            <a href="#" class="link popup-close">Close</a>
          </div>
        </div>
      </div>
      <div class="page-content">
        <div class="block">
          <p>Popup content goes here.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Login Screen -->
<div class="login-screen" id="my-login-screen">
  <div class="view">
    <div class="page">
      <div class="page-content login-screen-content">
        <div class="login-screen-title">Login</div>
        <div class="list">
          <ul>
            <li class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label">Username</div>
                <div class="item-input-wrap">
                  <input type="text" name="username" placeholder="Your username">
                </div>
              </div>
            </li>
            <li class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label">Password</div>
                <div class="item-input-wrap">
                  <input type="password" name="password" placeholder="Your password">
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list">
          <ul>
            <li>
              <a href="#" class="item-link list-button login-button">Sign In</a>
            </li>
          </ul>
          <div class="block-footer">Some text about login information.<br>Click "Sign In" to close Login Screen</div>
        </div>
      </div>
    </div>
  </div>
</div>

App.js

// Dom7
var $$ = Dom7;
var getprod = getdata();

// Framework7 App main instance
var app = new Framework7({
root: ‘#app’, // App root element
id: ‘io.framework7.testapp’, // App bundle ID
name: ‘Framework7’, // App name
theme: ‘auto’, // Automatic theme detection
// App root data
data: function () {
return {
user: {
firstName: ‘John’,
lastName: ‘Doe’,
},
// Demo products for Catalog section
products: [
{
id: ‘1’,
title: ‘Apple iPhone 8’,
description: ‘Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi tempora similique reiciendis, error nesciunt vero, blanditiis pariatur dolor, minima sed sapiente rerum, dolorem corrupti hic modi praesentium unde saepe perspiciatis.’
},
{
id: ‘2’,
title: ‘Apple iPhone 8 Plus’,
description: ‘Velit odit autem modi saepe ratione totam minus, aperiam, labore quia provident temporibus quasi est ut aliquid blanditiis beatae suscipit odio vel! Nostrum porro sunt sint eveniet maiores, dolorem itaque!’
},
{
id: ‘3’,
title: ‘Apple iPhone X’,
description: ‘Expedita sequi perferendis quod illum pariatur aliquam, alias laboriosam! Vero blanditiis placeat, mollitia necessitatibus reprehenderit. Labore dolores amet quos, accusamus earum asperiores officiis assumenda optio architecto quia neque, quae eum.’
},
]
};
},
// App root methods
methods: {
helloWorld: function () {
app.dialog.alert(‘Hello World!’);
},
},
// App routes
routes: routes,
});

// Init/Create views
var homeView = app.views.create(’#view-home’, {
url: ‘/’
});
var catalogView = app.views.create(’#view-catalog’, {
url: ‘/catalog/’
});
var settingsView = app.views.create(’#view-settings’, {
url: ‘/settings/’
});

// Login Screen Demo
$$(’#my-login-screen .login-button’).on(‘click’, function () {
var username = $$(’#my-login-screen [name=“username”]’).val();
var password = $$(’#my-login-screen [name=“password”]’).val();

// Close login screen
app.loginScreen.close(’#my-login-screen’);

// Alert username and password
app.dialog.alert('Username: ’ + username + '
Password: ’ + password);
});

//searchbar
var searchbar = app.searchbar.create({
el: ‘.searchbar’,
searchContainer: ‘.list’,
searchIn: ‘.item-title’,
on: {
search(sb, query, previousQuery) {
console.log(query, previousQuery);
}
}
});

catalog.html

<template>
  <div class="page" data-name="catalog">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="title">Search Bar</div>
        <div class="subnavbar">
          <!-- Searchbar with auto init -->
          <form  class="searchbar">
            <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 if-not-aurora">Cancel</span>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="page-content">
      <!-- Searchbar backdrop -->
      <div class="searchbar-backdrop"></div>
      <!-- hide-on-search element -->
      <div class="block searchbar-hide-on-search">
        <p>This block will be hidden on search. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <!-- search target list -->
      <div class="list searchbar-found">
        <ul>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Acura</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Audi</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">BMW</div>
            </div>
          </li>
          ...
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Volvo</div>
            </div>
          </li>
        </ul>
      </div>
      <!-- Nothing found message -->
      <div class="block searchbar-not-found">
        <div class="block-inner">Nothing found</div>
      </div>
    </div>
  </div>


</template>
<script>
  return {
    data: function () {
      return {
        products: this.$root.products,
        
         };
    }
  };
</script>

Routes etc are from the template.

You have to move Searchbar creation/initialization to your catalog.html file (in <script> section) to the on.pageInit page event handler http://framework7.io/docs/router-component.html#component-page-events

It works. Perfect. Thank you very much :slight_smile: