I am using a flex repeater to create various icons. I would like to implement a search bar feature due to the possibility of there being many icons. I have tried using a text field but I am unsure how to correctly bind it to the flex repeater/instances in order for it to work properly.
Welcome to the forum, Alexzandra.
Do you mean "to display many icons"?
How are you generating the instances in the flex repeater?
If you want to post code then see Wiki - how to post code on this forum.
Without knowing your context, I would suggest adding all of your icons to the flex container and binding their position.display props to hide/show them. Maybe this isn't feasible for your use-case as the icon list might be too large or dynamic. (Context helps to build the idea of what you're actually trying to achieve)
As for a general response to binding the prop.instances of your flex repeater to a property in order to generate your instances, you would simply bind the props.instances prop using a property binding to your text field's props.text property, and then add a script transform onto it and then build and return your instances list in the script.
You can also use @pturmel 's free Integrations Toolkit module to build simpler lists (than you can produce via scripting) with much higher efficiency and lower resource usage. You'll find examples of this throughout the forum using functions like forEach, it(), where expression functions.
1 Like
You first need to have a static base where all icons images and icons names be defined first. Then use a input text to implement a fuzzy string logic like SequenceMatcher and based on ratio score between your input and the icon name would be the results. When there is not input text the filter shoud be disabled.
Yes, to display the icons.
You could use a client tag bound to the text box that is then passed to the template that is being repeated. I did something similar for a repeater I had where I had a static string that I wanted to exclude from the repeater that was displaying a bunch of strings.