Hello,
Can someone let me know why some elements do not work on my searchbar? I used the same code from the docs: http://v2.framework7.io/docs/searchbar.html.
<div class="page">
<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">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>
var app = new Framework7();
// create searchbar
var searchbar = app.searchbar.create({
el: '.searchbar',
searchContainer: '.list',
searchIn: '.item-title',
on: {
search(sb, query, previousQuery) {
console.log(query, previousQuery);
}
}
});
When I click on the textbox, the backdrop doesn’t appear to dim the page, and those with
the searchbar-hide-on-search class do not get hidden when I type. searchbar-not-found doesn’t show either. I think it’s automatic but is it something that I should do programmatically? I’m using a tabbed interface like Instagram, I’m not sure if I should do anything differently.
Thanks!