Velo 一个搜索输入关键字和五个复选框组筛选器/搜索关键字结果筛选器

数据库搜索代码运行良好。你可以在下面看到。我想添加一个复选框组（5个单元），它将与我的搜索代码集成。所有这些都在一个数据库上运行

如何添加将与数据库搜索代码一起使用的checkboxgroup代码作为示例

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);
    }); 
} 

---

看起来您的搜索按钮正在运行查询，而复选框组正在对数据集进行筛选。如果你想让两个人一起工作，那通常不是个好主意

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

---

基本思想是在将查询返回的数据分配给中继器之前保存数据。然后，每当复选框组中发生更改时，您都可以使用JS

.filter（）

函数根据原始查询结果和复选框中的选择创建过滤数组。使用过滤后的阵列重置中继器的数据。

任何帮助都会对我非常有帮助。

$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);
    } );
}