一个搜索输入关键字和五个 CheckBoxGroup 过滤器/搜索关键字结果过滤器答案

【问题标题】：One search input keyword and five CheckBoxGroup Filter / Search Keyword Results Filter一个搜索输入关键字和五个 CheckBoxGroup 过滤器/搜索关键字结果过滤器
【发布时间】：2020-12-28 10:29:37
【问题描述】：

数据库搜索代码工作正常。你可以在下面看到它。我想添加一个与我的搜索代码集成的复选框组（5 个单位）。全部在一个数据库上运行。

如何添加以数据库搜索代码为例的复选框组代码？

Column name
Detail ---------- Search input keyword
(the search code works but no filters).....
continent - checkboxgroup1.....
country - checkboxgroup2.....
sector - checkboxgroup3.......
fund - checkboxgroup4......
cvp code - checkboxgroup5

我的搜索代码

import wixData from 'wix-data'; 

export function searchButton_onClick(event) 
{
 //assume the input comes from a component called 'searchInput'
 //CHANGE TO YOUR SPECIFIC COMPONENT NAME
 let searchValue = $w('#SearchBox').value; 

 //split the search inputs into distinct words
 let searchWords = searchValue.split(' '); 

//build a query for 'my-collection'
//CHANGE THIS TO YOUR COLLECTION NAME
let query = wixData.query('Afghanistan')
      .descending("overview");

 //add a "contains" condition to the query for each word:
 //assumes we search in the field 'myField'
 //CHANGE THIS TO YOUR FIELD NAME
 for (let i=0; i < searchWords.length; i++) 
    {       
        query = query.contains('overview', searchWords[i])
    }  

 //actually run the query:
    query.find().then(res => 
    { 
 //give the results to the table to display
 //assume the table is named 'resultsTable' 
 //CHANGE TO YOUR SPECIFIC COMPONENT NAME
        $w('#repeater1').data = res.items; 
    })
    .catch(err =>
    {
        console.log("problem in search! " + err);
    }); 
} 









import wixData from 'wix-data'; 

export function searchButton_onClick(event) 
{
 //assume the input comes from a component called 'searchInput'
 //CHANGE TO YOUR SPECIFIC COMPONENT NAME
 let searchValue = $w('#SearchBox').value; 

 //split the search inputs into distinct words
 let searchWords = searchValue.split(' '); 

 //build a query for 'my-collection'
 //CHANGE THIS TO YOUR COLLECTION NAME
 let query = wixData.query('Afghanistan')
  .descending("overview");

 //add a "contains" condition to the query for each word:
 //assumes we search in the field 'myField'
 //CHANGE THIS TO YOUR FIELD NAME
 for (let i=0; i < searchWords.length; i++) 
    {       
        query = query.contains('overview', searchWords[i])
    }  

 //actually run the query:
    query.find().then(res => 
{ 
 //give the results to the table to display
 //assume the table is named 'resultsTable' 
 //CHANGE TO YOUR SPECIFIC COMPONENT NAME
        $w('#repeater1').data = res.items; 
    })
    .catch(err =>
    {
        console.log("problem in search! " + err);
    }); 
}

下面是过滤的工作代码。我怎样才能结合两个代码。

$w.onReady(function () {
filterView();

$w("#checkboxGroup1").onChange( (event, $w) => {
  filterView();
});


$w("#checkboxGroup2").onChange( (event, $w) => {
  //filterView();
//});
});

function filterView(){
    var continentsFilter = $w("#checkboxGroup1").value
    
    var countryFilter = $w("#checkboxGroup2").value
    
    console.log('continents', continentsFilter);
    
    console.log('country', countryFilter);
    
    $w("#dataset1").setFilter( wixData.filter()
    .hasSome("continents", continentsFilter)
    
    .hasSome("country", countryFilter)
    )

    .then( () => {
            let count = $w("#dataset1").getTotalCount(); 
            if(count === 0){
                $w("#group1").show();
            }else{
                $w("#group1").hide();
            }
    } )
    .catch( (err) => {
    console.log(err);
    } );
}

【问题讨论】：

任何帮助都会对我很有帮助。

标签： velo

【解决方案1】：

看起来您的搜索按钮正在运行查询，而复选框组正在对数据集进行过滤。如果您希望两者一起工作，这通常不是一个好主意。

在这种情况下，在我看来最好在单击复选框时使用标准 JS 进行过滤。这种方式也应该很快。

基本思想是在将查询返回的数据分配给转发器之前保存它。然后每次复选框组发生变化时，您可以使用 JS .filter() 函数根据原始查询结果和复选框中的选择创建过滤数组。使用过滤后的数组重置中继器的数据。

【讨论】：