Question

任务

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

到目前为止我做了什么

目前设置了具有两个单独虚拟列表的滑块，启动了搜索栏。是否有任何好方法允许搜索栏应用于两个列表而不会对customSearch true参数感到疯狂。如果这是唯一的选择，我如何保留过滤列表的默认方法，我只想将它应用两次。

我还考虑使用display：none创建第二个搜索栏，并将其从看到的搜索栏复制输入。然后隐藏的搜索栏可以应用于一个列表，而看到的列表将应用于另一个列表。但那真是太烂了，根本就不整齐。

对不起如果有点不清楚，我不确定如何最好地接近挑战，谢谢你的帮助

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单个搜索栏，用于多个虚拟列表

1 个答案: