Interchangeable elements in repeater and synchronization problem

Ask the community
,
1

As I have a repeater that should show only one type of content (i.e. text or image, which share the same space in the container) in each container of the repeater, I made both elements be collapsed on the load, and only one of them be expanded according to a field in the collection.

I can’t figure out how to pass the query results’ data to the repeater without messing up with the repeater- pagination bar synchronization. I looked at ‘Build and perform a search and display the results in a repeater’ in the following link and tried to implement the same thing but still not working.
https://www.wix.com/corvid/reference/wix-search.html#filter

I am wondering, is there a better way to show only one type of content in the repeater to avoid the data passing and the synchronization problem? If the approach I have adopted is good, then how can I overcome the problems?

You can find the code behaviour in this link .
And this is the code.

import wixData from "wix-data";

$w.onReady(function () {

});

export function searchBox_keyPress(event, $w) {
 let searchItem = $w('#searchBox').value;
 if (event.key === "Enter") {
        queryDB(searchItem);
    } 
}

export async function searchIcon_click(event) {
 let searchItem = $w('#searchBox').value;
 await queryDB(searchItem);
}

function queryDB(searchItem) {
    wixData.query("MultiItem_1")
        .contains("text", searchItem)
        .find()
        .then((results) => {
 if (results.items.length > 0) {
     let matchedItem = results.items; 
     itemToDisplayInRpeater(matchedItem);
     $w('#text2').expand()
     } else {
                 
            }
        });
}

function itemToDisplayInRpeater(matchedItem) {
    $w("#repeater1").data = matchedItem;
    $w('#repeater1').onItemReady(($item, itemData, index) => {
        $item('#text1').text = itemData.text;
        $item('#image1').image = itemData.image;
 switch (itemData.type) {
 case 1:
            $item("#text1").expand();
            $item("#image1").collapse();
            $item('#container1').expand();
 break;
 case 2:
            $item("#text1").collapse();
            $item("#image1").expand();
            $item('#container1').expand();
 break;
        }
    });

}
2

The onItemReady() function is an event handler that is triggered when new items have been added to the repeater. It should be moved to the page’s onReady() function.

Furthermore, in the Repeater API docs it’s stated:

You cannot modify the data array in-place. To add, change, or remove objects from the repeater’s data array:

  1. Store the value of the data property in a variable.

  2. Make changes to the objects of the data array.

  3. Reset the data property with the modified array.

That means, that you can’t just add another item to the Repeater as you are tryiing in the line:

$w("#repeater1").data = matchedItem;

Follow steps 1-3 above to change the contents of the Repeater.

Read the .data API for more information on setting and updating the contents of the Repeater.