# Search bar for Flex Repeater

**URL:** <https://forum.inductiveautomation.com/t/search-bar-for-flex-repeater/96456>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 25, 2024, 7:50pm UTC](https://forum.inductiveautomation.com/t/search-bar-for-flex-repeater/96456 "2024-09-25T19:50:36Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alexzandra\_Mallory](https://avatars.discourse-cdn.com/v4/letter/a/a9a28c/32.png) [@Alexzandra\_Mallory](https://forum.inductiveautomation.com/u/Alexzandra_Mallory)\
**Post date:** [September 25, 2024, 7:50pm UTC](https://forum.inductiveautomation.com/t/search-bar-for-flex-repeater/96456/1 "2024-09-25T19:50:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [September 25, 2024, 8:03pm UTC](https://forum.inductiveautomation.com/t/search-bar-for-flex-repeater/96456/2 "2024-09-25T20:03:12Z")

</div>

Welcome to the forum, Alexzandra.

> [@Alexzandra\_Mallory](#):
>
> ... to create various icons.

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](https://forum.inductiveautomation.com/t/wiki-how-to-post-code-on-this-forum/77831).

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [September 26, 2024, 1:40am UTC](https://forum.inductiveautomation.com/t/search-bar-for-flex-repeater/96456/3 "2024-09-26T01:40:23Z")

</div>

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](https://inductiveautomation.com/moduleshowcase/module/automation-professionals-llc-integration-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.

---

<div class="post-metadata">

**Author:** ![jespinmartin1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jespinmartin1/32/57175_2.png) [@jespinmartin1](https://forum.inductiveautomation.com/u/jespinmartin1)\
**Post date:** [September 26, 2024, 3:21am UTC](https://forum.inductiveautomation.com/t/search-bar-for-flex-repeater/96456/4 "2024-09-26T03:21:50Z")

</div>

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](https://docs.python.org/es/3/library/difflib.html#sequencematcher-examples) 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.

---

<div class="post-metadata">

**Author:** ![Alexzandra\_Mallory](https://avatars.discourse-cdn.com/v4/letter/a/a9a28c/32.png) [@Alexzandra\_Mallory](https://forum.inductiveautomation.com/u/Alexzandra_Mallory)\
**Post date:** [September 30, 2024, 2:56pm UTC](https://forum.inductiveautomation.com/t/search-bar-for-flex-repeater/96456/5 "2024-09-30T14:56:07Z")

</div>

Yes, to _display_ the icons.

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [September 30, 2024, 7:35pm UTC](https://forum.inductiveautomation.com/t/search-bar-for-flex-repeater/96456/6 "2024-09-30T19:35:00Z")

</div>

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.
