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

Question

数据库搜索代码工作正常。你可以在下面看到它。我想添加一个将与我的搜索代码集成的复选框组（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);
    } );
}

Answer 1

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

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

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

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

One search input keyword and five CheckBoxGroup Filter / Search Keyword Results Filter

velo