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.