Selection Tags - Single Selection

Ask the community
,
1

Hi everyone.
I’m a novice in coding so I would love some help with my selections tags.

I’ve set up a repeater in a page and used selection tags to filter according using the tutorial from this video.
https://www. youtube. com/ watch?v=PRdm7NjOouU

Can I make it so that when a visitor clicks a tag, it automatically clears the previous tag as I’m afraid the current setup would be confusing from a customer perspective?

I’ve seen other posts in the forum, but nothing I tried worked.

This is my code as it is currently.

// API Reference: https://www.wix.com/velo/reference/api-overview/introduction
// “Hello, World!” Example: https://learn-code.wix.com/en/article/1-hello-world

$w.onReady(function () {
 // Write your JavaScript here

 // To select an element by ID use: $w("#elementID")

 // Click "Preview" to run your code
});
import wixData from 'wix-data';
 
const databaseName = 'Books';
const databaseField = 'tropes';
 
$w.onReady(function () {
 
    $w('#selectionTags1').onChange((event) => {
 const selectedTag = $w('#selectionTags1').value;
        addItemstoRepeater(selectedTag);
 })
});
 
function addItemstoRepeater(selectedOption = [0]) {
 
 let dataQuery = wixData.query(databaseName);
 
 if (selectedOption.length > 0) {
        dataQuery = dataQuery.hasSome(databaseField, selectedOption);
 }
 
    dataQuery
 .find()
 .then(results => {
 const filtereditemsReady = results.items;
            $w('#repeater2').data = filtereditemsReady;
 
 })
}

Any help would be appreciated.

Rhys

2

Take a look here…
This could be interessting for you…
https://www.media-junkie.com/one-way-selection-tags

1 Like
3

Thank you. I tried that and the best I can get is it deselects the first tag, but it still shows the results for 2 tags. When I click a 3rd tag, it clears the first one.

Can you tell me what I’m doing wrong?

Here’s my code currently.

// API Reference: https://www.wix.com/velo/reference/api-overview/introduction
// “Hello, World!” Example: https://learn-code.wix.com/en/article/1-hello-world

$w.onReady(function () {
 // Write your JavaScript here

 // To select an element by ID use: $w("#elementID")

 // Click "Preview" to run your code
});
import wixData from 'wix-data';
 
const databaseName = 'Books';
const databaseField = 'tropes';
 
$w.onReady(function () {
 
    $w('#selectionTags1').onChange((event) => {
 const selectedTag = $w('#selectionTags1').value;
        addItemstoRepeater(selectedTag);
 })
});
 
function addItemstoRepeater(selectedOption = [0]) {
 
 let dataQuery = wixData.query(databaseName);
 
 if (selectedOption.length > 0) {
        dataQuery = dataQuery.hasSome(databaseField, selectedOption);
 }
 
    dataQuery
 .find()
 .then(results => {
 const filtereditemsReady = results.items;
            $w('#repeater2').data = filtereditemsReady;
 
 })
}
 

$w.onReady(function () {

 

    $w('#selectionTags1').onChange (() => {

 let VALUE = $w('#selectionTags1').value

 let LENGTH = VALUE.length

 

        console.log (LENGTH)

 

 for (var i = 0; i <LENGTH-1; i ++) {

 if (LENGTH> 1) {

 VALUE.shift () 

 }

 else {console.log("nothing")}

 }

            console.log (VALUE)
 
        setTimeout (() => {

            $w('#selectionTags1').value = []

            $w('#selectionTags1').value = VALUE

 
 },1)

 })

});
4

@rhys
Try to understand this code…

$w.onReady(async function() {
    $w('#selectionTags1').onChange(async()=>{
       let VALUE = $w('#selectionTags1').value
       let LENGTH = VALUE.length
 
        console.log("Value before ---> SHIFT: ", VALUE)
       for (var i = 0; i < LENGTH-1; i++) {
          if(LENGTH>1) {
             let oldVALUE = await VALUE.shift()
             console.log("Old VALUE ---> ", oldVALUE)
             $w('#selectionTags1').value = [], 
             $w('#selectionTags1').value = await VALUE
             console.log("Current selected VALUE ---> ", VALUE)
          }
       }
    });
});

Take a look onto —> CONSOLE! (start using the Tag-Menu).

5

@russian-dima I couldn’t understand the code you posted, but I managed to get the repeater to show only 1 tag at one time by changing the VALUE in this line

        setTimeout(()=>{
            $w('#selectionTags1').value = []
            $w('#selectionTags1').value = VALUE
 },1)

into a number. Any number works.
The problem I have is that when I click a tag, it doesn’t stay highlighted. It does show me the results for it, but not which tag is currently selected.

Would you know how I can fix it?

This is my code as it stands.


$w.onReady(function () {
});
import wixData from 'wix-data';
 
const databaseName = 'Books';
const databaseField = 'tropes';
 
$w.onReady(function () {
 
    $w('#selectionTags1').onChange((event) => {
 const selectedTag = $w('#selectionTags1').value;
        addItemstoRepeater(selectedTag);
 })
});
 
function addItemstoRepeater(selectedOption = [0]) {
 
 let dataQuery = wixData.query(databaseName);
 
 if (selectedOption.length > 0) {
        dataQuery = dataQuery.hasSome(databaseField, selectedOption);
 }
 
    dataQuery
 .find()
 .then(results => {
 const filtereditemsReady = results.items;
            $w('#repeater2').data = filtereditemsReady;
 
 })
}
 
$w.onReady(function () {

    $w('#selectionTags1').onChange(()=>{
 let VALUE = $w('#selectionTags1').value
 let LENGTH = VALUE.length

        console.log(LENGTH)

 for (var i = 0; i < LENGTH-1; i++) {
 if(LENGTH>1) {
 VALUE.shift()
 
 }
 else{ }
 }
            console.log(VALUE)

        setTimeout(()=>{
            $w('#selectionTags1').value = []
            $w('#selectionTags1').value = [1]
 },1)
 })
});

Thanks

6

@rhys If you wish to only have the last -clicked tab selected, I think you can do something like:

$w("#tags").onChange(() => {
$w("#tags").value = [$w("#tags").value.reverse[0]];
})