Hi, I can’t solve this issue. I have a page where I add a list dynamically before to enter in the page. I’d like to have a search bar. However the searchbar doesn’t work, if I write something on it, the list disappear completely. I notice that if I write the list normally, the search bar works. Thank you in advance for your help.
this is the html function:
<div data-name="city" class="page">
<!-- Searchbar with auto init -->
<form class="searchbar searchbar-init">
<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">Delete</span>
</div>
</form>
<div class="fab fab-right-bottom fix-fab-right-bottom">
<a href="/aziende/add/">
<i class="icon f7-icons">add</i>
</a>
</div>
<div class="page-content">
<div class="row justify-content-center">
<div class="col-100 tablet-100 desktop-auto">
<!-- Searchbar backdrop -->
<div class="searchbar-backdrop"></div>
<div class="col-100 tablet-auto desktop-50">
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<h2>City</h2>
</div>
<div class="row">
<div class="block searchbar-hide-on-search">
<p>List of the city</p>
</div>
<div class="col-100 tablet-auto desktop-auto">
<div class="list links-list searchbar-found" id="listCity">
<!--here I append the list -->
</div><!--list-->
</div><!--col-->
</div><!--row-->
</div><!--card-content-->
</div><!--.card-->
</div><!--.col-->
</div> <!-- ./ col -->
</div> <!-- ./ row -->
</div> <!-- ./ page-content -->
<!-- Nothing found message -->
<div class="block searchbar-not-found">
<div class="block-inner">Nothing found</div>
</div>
this is my app.js
{
name: 'city',
path: '/city/',
url: './pages/city/main.html',
on: {
pageInit: function(){
addListCity(); // append dynamically the list in the div #listCity
CitySearchBar(); // add the searcbar element
}
},
this is the search bar element
const CitySearchBar = () => {
// create searchbar
var searchbar = app.searchbar.create({
el: '.searchbar',
searchContainer: '#listCity',
searchIn: '.item-title',
on: {
search(sb, query, previousQuery) {
console.log(query, previousQuery);
}
}
});
}
before to search
after to search, all list disappears
