Framework7 多个虚拟列表的单一搜索栏

Question

任务

想象一下典型的搜索栏和结果列表。借助我的 Cordova 应用程序中的 framework7，我们当然可以轻松实现这一点，即使是使用未呈现所有元素的虚拟列表也是如此。但我要实现的是一个搜索栏，它将影响两个虚拟列表。这样做的原因是作为我正在创建的应用程序的一部分，将有一个新设备和翻新设备的列表。每个列表都位于同一页面上的不同滑块选项卡上，因此在任何时候都只能看到一个列表。但我需要使用单一搜索栏来过滤两者。

到目前为止我做了什么

目前设置了带有两个独立虚拟列表的滑块，启动了搜索栏。有没有什么好方法可以让搜索栏应用于两个列表，而不会因为 customSearch true 参数而疯狂。如果这是唯一的选择，我将如何保留过滤列表的默认方法，我只想应用它两次。

我还考虑过使用 display:none 创建第二个搜索栏，并让它从看到的搜索栏复制输入。然后隐藏的搜索栏可以应用于一个列表，而可见的搜索栏将应用于另一个。但这真的很 hacky，一点也不整洁。

抱歉，如果这有点不清楚，我不确定如何最好地应对挑战，感谢您的帮助

Answer 1

我初始化了我的两个虚拟列表，我使搜索功能可以从外部访问。然后我用 customSearch true 初始化我的搜索栏，在搜索时我使用我的虚拟列表 (vl) 数组并使用可用的过滤器和查询功能单独搜索它们。这有点痛苦，但效果很好。此示例中的 vl[1] 只是 vl[0] 的副本，因为我还没有实际设置它。

    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].internal_descriptn.toLowerCase().indexOf(query.toLowerCase().trim()) >= 0) foundItems.push(i);
        }
        // Return array with indexes of matched items
        return foundItems;
    }

    var vl = [];
    vl[0] = myApp.virtualList('.vl0', {//initialise new products
        items: selectProd,
        template: '<li data-value="{{model_id}}" class="item-content"><div class="item-inner"><div class="item-title list-title">{{internal_descriptn}}</div></div></li>',
        searchAll: function(query,items) {
            return virtualSearchAll(query, items);
        }
    });
    vl[1] = myApp.virtualList('.vl1', {//initialise test/referb products
        items: [{internal_descriptn:"test desc",model_id:"wehayy"}],
        template: '<li data-value="{{model_id}}" class="item-content"><div class="item-inner"><div class="item-title list-title">{{internal_descriptn}}</div></div></li>',
        searchAll: function(query,items) {
            return virtualSearchAll(query, items);
        }
    });

    var mySearchbar = myApp.searchbar('.searchbar', {
        customSearch: true,
        searchIn: '.item-title',
        onSearch: function(s) {
            previousQuery = s.query;
            for (let n in vl) {
                let vlItems = virtualSearchAll(s.query,vl[n].items);
                vl[n].filterItems(vlItems);
                if(vlItems.length === 0) {//if the search has no results then show no results element else hide it
                    $('.vl'+n+'-not-found').show();
                } else {
                    $('.vl'+n+'-not-found').hide();
                }
            }
            highlightRows();
        }
    });

我应该补充一点，highlightRows() 是不同功能的一部分，需要在每次搜索时刷新。你可以忽略那个

Framework7 多个虚拟列表的单一搜索栏

Framework7 Single Searchbar for multiple Virtual Lists

javascript

search

list

cordova

html-framework-7