Collapse / Expand Repeater based on the value of a text user input

Hello everyone. So, I’m struggling to create a “custom search” for my website and my goal is to put some repeaters on a lightbox, and through a text user input it will show the results. However, what I want to accomplish is… to keep my repeater closed till the user type something, and if the text value connects to my dataset, the repeater must expand. For example, I have a dataset of characters (archer, warrior, mage), and if a user types “warrior” the repeater must expand and show the result. If the user deletes again the text and wants to search for something else it must collapse again. :tired_face:

Hi diavele,

Question, why do you use repeater?
To make something collapse/expand on input you can do this:
Select the input field, at the bottom right (right from the code panel) you get a property panel.
Search for the onInput event.
Click right from it , give it a name or hold the name it gives you and press enter.
A code block is added to the code panel.
In there between {} add the following:
If($w(“#yourInputFieldName”).value === “warrior” ||$w(“#yourInputFieldName”).value === “mage” ){
$w(“#yourElementToExpand”).expand()
} else {
$w(“#yourElementToExpand”).collapse()
}

Hello Kristof, thank you for answering my question. I think that repeater is the best choice because I have plenty of data to display as the image of a character, name and role. I’ve created a dynamic page to display single pages for every character based on their name so I would put buttons on the repeater results for the user to go on every page. If you think that repeater is a bad call here, I could rather show only the title, connected with the link of every page;

@diavele
Oke so you have a textfield.
if they type in the name warrior there would be more then 1 warrior to be displayed?

@volkaertskristof Actually, no cause I will go with their names, so it will usually so only 1 character per search… If I put the roles as a search term it will so 10-20 or more.

@diavele
Oke so if their search on their name it probably only will show 1, never 2 i guess.
Then the repeater item is a waste (in my opinion).
The repeater item is used to show more then 1 item.
If its just 1, then you can better just put it in a container.
load the data in there with the button that brings you to a dynamic page.

Kind regards,
Kristof.

What you can do is adding it to a repeater, and whyle they are typing show the results that have part of what they typed in the name.
lets say you have 2 characters named “warriorboy”," warriorgirl"
when they start typing warrior they will see both characters.
when they go further and type warriorgi they already will only see warriorgirl.

This way you also don’t have to collapse/expand the repeater, you can show all of the characters and filter when they start typing.

Ok, I think I figured out what I’ll do. Thank you so much @kristof for your help and time for this!

No problem,
When you finished let me know (wanne take a peak at it :smiley: )
If you have any other questions, let me know.

@volkaertskristof So… I’ve tried creating the search bar and it worked fine till I’ve put the collapse/expand term in the code. When the preview loads, it show all the heroes, and whenever I type a name, it collapses :joy:

code


$w.onReady(function () {
      $w("#dataset1").onReady( () => {
} );
});

//search bar
import wixData from 'wix-data';

let debounceTimer;

export function input1_keyPress(event) {
 if (debounceTimer) {
        clearTimeout(debounceTimer);
        debounceTimer = undefined;
    }
    debounceTimer = setTimeout(() => {
        filter($w('#input1').value);
    }, 200);
}

let lastFilterTitle;
function filter() { 
$w('#dataset1').setFilter( 
wixData.filter() 
.contains("title", $w("#input1").value) 
.and( wixData.filter()
) 
);

if($w("#input1").value === "title" ||$w("#input1").value === "title" ){

$w("#repeater1").expand()

} else {

$w("#repeater1").collapse()

}
}

I think that something’s off to this line if($w(“#input1”).value === “title” ||$w(“#input1”).value === “title” )

I’ve also checked the dataset to be read & write, and the id field name on the database of the names, its “title”.

There is some kind of an error with the set filter but it didn’t show up till I’ve put the last lines of code I said earlier.

@volkaertskristof I used a repeater, caused I figured out that I have to contain more id fields, like roles, lanes, and more of each character as a search term, for those who don’t remember the name of one character for example.

Oke so does it still has to collapse/expand or will there always be something in the repeater?
If there always will be something in the repeater the if statement can go away.
While you are typing you have to filter the dataset.

Well, I just want to load as collapsed, for speed / loading issues and load only the search results, that’s why I want to accomplish that.

I removed the code line of this


if($w("#input1").value === "title" ||$w("#input1").value === "title" ){

$w("#repeater1").expand()

} else {

$w("#repeater1").collapse()

}

and the search bar works fine :no_mouth: so its not the search bar at least.

w.onReady(function () {
      $w("#dataset1").onReady( () => {
} );
});

//search bar
import wixData from 'wix-data';

let debounceTimer;

export function input1_keyPress(event) {
 if (debounceTimer) {
        clearTimeout(debounceTimer);
        debounceTimer = undefined;
    }
    debounceTimer = setTimeout(() => {
        filter($w('#input1').value); // Here you are using your filter and giving the value with it. if you do this you should ask for a value in the filter function.
    }, 200);
}

let lastFilterTitle;
function filter() { //<--- should be filter(data)
$w('#dataset1').setFilter( 
wixData.filter() 
.contains("title", data) //<--- here i used the data that is given when you used the filter function
.and( wixData.filter() //<--- here is something wrong. you don't add any new data to be filtered. i think this can go away
) 
);

if($w("#input1").value === "title" ||$w("#input1").value === "title" ){

$w("#repeater1").expand()

} else {

$w("#repeater1").collapse()

}
}

I added some comments to the code you showed.
// …
Also, filtering a dataset will take olmost no time, you create a waiting time by using the debounceTimer.

@volkaertskristof I replaced the code based on your notes, but the search bar didn’t work. I still think that it doesn’t read the value of my database in order to work the command collapse/expand.

@volkaertskristof Anyway, I’ll avoid the collapse/expand term on this one for now. I’ll just leave it as it is with a search bar. Thank you once again for your time and help!

Oke so evrything except the collapse/expand works now? :slight_smile:

@volkaertskristof Yes!