Framework7 Single Searchbar for multiple Virtual Lists inside Tabs

Questions
1

Hi,

I have a layout which contain 3 tabs (all these three tabs load via virtual lists let say vl[0].vl[1],vl[]) and with single search bar, I want this search bar to use with all the three tabs independently, means if i search in tab one it should filter only tab one data and if i search in tab two then it should filter only tab two data. So anyone help me on this matter then i would be greatly thankful

Chora

2

You know which tab is active, and you can capture searbar’s event, right? then you can define your own logic.

3

Yes you are correct , i did exactly the same as you said in here i get the active tab by using a class which i changed when tab moves, the i call search function as shown in below, but data filtering only happens in first virtual list only which was inside the first tab, when i switch to second tab then it shows nothing found, can you help me here

var vl[];
function virtualSearchAll(query,items){//search query
var foundItems = [];
for (var i = 0; i < items.length; i++) {
// Check if title contains query string
if (items[i].searchItem.toLowerCase().indexOf(query.toLowerCase().trim()) >= 0) foundItems.push(i);
}
// Return array with indexes of matched items
return foundItems;
}

var mySearchbar = myApp.searchbar(’.searchbar’, {
customSearch: true,
searchIn: ‘.item-title’,
onSearch: function(s) {
console.log(‘Searching’, s);
previousQuery = s.query;
//for (var n in vl) {
if($$("#tabSlipBtn").hasClass(“w3-bottombar”)){
var vlItems = virtualSearchAll(s.query,vl[1].items);
vl[1].filterItems(vlItems);

		}else if($$("#tabCeftBtn").hasClass("w3-bottombar")){
			var vlItems = virtualSearchAll(s.query,vl[2].items);
            vl[2].filterItems(vlItems);
			
		}else if($$("#tabSdbBtn").hasClass("w3-bottombar")){
			var vlItems = virtualSearchAll(s.query,vl[3].items);
            vl[3].filterItems(vlItems);
			
		}else{
			
			
		}
            /* var vlItems = virtualSearchAll(s.query,vl[n].items);
            vl[n].filterItems(vlItems); */
            
       // }
        
    },
	onClear: function(s) {
    console.log('Clearing', s);
	}
});    }
4

Another solution define 3 different searchbar and how only one belongs to tab with v-if binding

5

data filtering only happens in first virtual list only which was inside the first tab, when i switch to second tab then it shows nothing found

The reason is that a searchbar is initialized with the CSS selector searchContainer option when you create it via app.searchbar.create({ searchContainer: '.virtual-list' }). It does not evaluate the CSS selector searchContainer option again and update its properties before you start a search.

I am new to Framework7. Have used it for a few days and I come up with a web design similar to yours.

So my web app is a single index.html file based on the only Single View template provided by the official Framework7 website.

https://framework7io.github.io/framework7-template-single-view/

I have changed it to have a single searchbar on the navbar of the view-main page.
I have changed it to have a Swipeable Tabs component on the view-main page.
Inside each tab, there is a page with page-content of a Virtual List.

To summarize, I have 1 searchbar, 10 tabs and every tab has 1 virtual list.

I expect the behavior of the searchbar is to search all .item-title span under the .tab-active tab.

So in my JavaScript, I have:

var searchbar = app.searchbar.create({
    el: '.searchbar',
    searchContainer: '.virtual-list', // init: virtual list on the 1st active tab
    searchIn: '.item-title span',
    on: {
        search(sb, query, previousQuery) {
            // ... your own logic
        }
    }
});

$$('a.tab-link').on('click', function() {
    tabChange();
});

app.on('tabShow', function(tabEl) {
    tabChange();
});

function tabChange() {
    searchbar.$searchContainer = $$('.tab-active .virtual-list');
    searchbar.searchContainer = searchbar.$searchContainer[0];
}

So when I swipe between tabs or click on a tab button, the tabChange() function will be triggered to set the searchContainer and $searchContainer properties of the only searchbar. It is what you need to change the search target.