通过多选过滤转发器项目-Wix 中的标签答案

【问题标题】：Filtering repeater items by multiple selection-Tags in Wix通过多选过滤转发器项目-Wix 中的标签
【发布时间】：2021-05-20 02:40:02
【问题描述】：

我正在构建一个带有多个选择标签字段（departmentTags、orgnisationTags、sectionTags、statusTags）的数据集合（项目）的 wix 网站。我在我的网站上创建了一个转发器来显示数据集合，并希望根据多个选择标签过滤器过滤显示的项目。

目前，我仅根据一组选择标签 (departmentTags) 过滤列表。 So when a departmentTag is selected the list of projects which belong to that department are filtered

import wixData from 'wix-data';

const collectionName = 'projects';

$w.onReady(function () { 

    setRepeatedItemsInRepeater()
    loadDataToRepeater()

    $w('#departmentTags').onChange((event) => {
        const selectedTags = $w('#departmentTags').value
        loadDataToRepeater(selectedTags)
    })
    
});

function setRepeatedItemsInRepeater() {
    $w('#projectRepeater').onItemReady(($item, itemData) => {

        $item('#projectImage').src = itemData.Image;
        $item('#projectTitle').text = itemData.Title;
        $item('#projectSummary').text = itemData.Summary;

    })
}

function loadDataToRepeater(selectedCategories = []) {

    let dataQuery = wixData.query(collectionName)

    if (selectedCategories.length > 0) {
        dataQuery = dataQuery.hasAll('department', selectedCategories)
    }
    
    dataQuery
        .find()
        .then(results => {
            const itemsReadyForRepeater = results.items
            $w('#projectRepeater').data = itemsReadyForRepeater;
        })
}

我现在还想在过滤项目时包含其余的选择标签。例如，我希望用户能够选择部门、组织和状态，以及要按所有三个类别过滤的转发器上列出的项目。

【问题讨论】：

标签： javascript velo

【解决方案1】：

听起来你需要将所有标签元素的onChange 设置为这样的一些函数：

function tagChange() {
  const selectedDepts = $w('#departmentTags').value;
  const selectedOrgs = $w('#organizationTags').value;
  const selectedStatuses = $w('#statusTags').value;

  loadDataToRepeater(selectedDepts, selectedOrgs, selectedStatuses);
}

然后，将loadDataToRepeater 函数修改为如下所示：

function loadDataToRepeater(selectedDepts, selectedOrgs, selectedStatuses) {

    wixData.query(collectionName)
      .hasAll('department', selectedDepts)
      .hasAll('organization', selectedOrgs)
      .hasAll('status', selectedStatuses)
      .find()
      .then(results => {
        $w('#projectRepeater').data = results.items;
      });
}

【讨论】：