# List component filtering and Highlighting

**URL:** <https://forum.inductiveautomation.com/t/list-component-filtering-and-highlighting/21075>\
**Category:** Ignition\
**Created:** [November 27, 2018, 1:11pm UTC](https://forum.inductiveautomation.com/t/list-component-filtering-and-highlighting/21075 "2018-11-27T13:11:54Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\
**Post date:** [November 27, 2018, 1:11pm UTC](https://forum.inductiveautomation.com/t/list-component-filtering-and-highlighting/21075/1 "2018-11-27T13:11:54Z")

</div>

Is this possible with List component?  
 ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/6/679e89dd3ae39ce83ef95d021c08ae5fc057ad1c.gif)

Ok, I’m sure that’s possible in Ignition, it’s just that I don’t know how to do it… 😇

Edit: here is the link where I found this: [https://www.logicbig.com/tutorials/java-swing/list-filter-highlighting.html](https://www.logicbig.com/tutorials/java-swing/list-filter-highlighting.html)  
It pure java and it’s too much for me… 😓

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [November 27, 2018, 1:38pm UTC](https://forum.inductiveautomation.com/t/list-component-filtering-and-highlighting/21075/2 "2018-11-27T13:38:11Z")

</div>

Interesting. Not safe to do such things in jython, if you don’t want to end up with un-openable windows. Unfortunately, that example code is not licensed in a way that could be cut and pasted into an Ignition module. /-:

---

<div class="post-metadata">

**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\
**Post date:** [November 27, 2018, 1:50pm UTC](https://forum.inductiveautomation.com/t/list-component-filtering-and-highlighting/21075/3 "2018-11-27T13:50:48Z")

</div>

I don’t need the complete filtering and highlighting like in the picture (which would be awesome)…  
I have a list component filled with items.  
What I need is, when user types in the text box for example letter ‘c’ that the list box highlights the first item which starts with ‘c’. Then user types ‘a’ and the list box highlights the text which starts with ‘ca’, then ‘r’ and list box highlights ‘car’ and so on…

---

<div class="post-metadata">

**Author:** ![PRAMANJ](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pramanj/32/66935_2.png) [@PRAMANJ](https://forum.inductiveautomation.com/u/PRAMANJ)\
**Post date:** [November 27, 2018, 1:57pm UTC](https://forum.inductiveautomation.com/t/list-component-filtering-and-highlighting/21075/4 "2018-11-27T13:57:34Z")

</div>

This is very easy to achieve in Angular using filters on client side, not sure if REACT allows this in Ignition 8!

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [November 27, 2018, 2:27pm UTC](https://forum.inductiveautomation.com/t/list-component-filtering-and-highlighting/21075/5 "2018-11-27T14:27:12Z")

</div>

I’ve done this in Ignition with power tables, but it should work with a list component too. The way I did it is by having a text box with Defer Updates and RejectUpdates boxes unchecked. I then place a power table underneath the box running a query like this

```auto
Select value From table Where value LIKE CONCAT(:text,'%')

```

the :text variable is bound to the text entry component. As you type it runs the query to select results that match. You could also concatenate another ‘%’ in front if you want to search for any combination of the input.

I also set the power table to be hidden, it becomes visible when you start typing in the text entry box, then it is hidden again when you click on a value in the power table. the click sets the text entry to the value you click on so you don’t have to finish all the typing to select a value.

hope that helps

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [November 27, 2018, 2:55pm UTC](https://forum.inductiveautomation.com/t/list-component-filtering-and-highlighting/21075/6 "2018-11-27T14:55:25Z")

</div>

The dynamic dropdown cloud template might be an interesting starting point:

> [@Vision: Dropdown Auto-completion/suggestion](http://forum.inductiveautomation.com/t/vision-dropdown-auto-completion-suggestion/20830):
>
> Is it possible to have the dropdown menu auto-complete / suggest options from the dropdown menu’s dataset when a user types into it? I don’t want the drop down menu to be freeform, but I do want to allow users to enter partial-text which will filter the dropdown menu items, instead of selecting from a potentially huge list of items. Cheers

---

<div class="post-metadata">

**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\
**Post date:** [November 27, 2018, 5:52pm UTC](https://forum.inductiveautomation.com/t/list-component-filtering-and-highlighting/21075/7 "2018-11-27T17:52:30Z")

</div>

Thank you all.

 ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/5/5a8adbf175c89571349ea429a3ff45e21a251c18.gif)  
I ended up with this (in project script library) which works with table and list component:

```auto
def isci(comp, searchstring):
	search = searchstring.lower()
	data = fpmi.db.toPyDataSet(comp.data)
	nbCol = data.getColumnCount()
	nbRow = data.getRowCount()
	rowToSelect = -1
	count = 0
	sourceStr = []
	for row in data:
		sourceStr = []
		for x in range(nbCol):
			sourceStr.append(str(row[x]).strip())
		sourceStr = u"".join(sourceStr)
		sourceStr = sourceStr.lower()
		if sourceStr.find(search) is not -1:
			rowToSelect = count
			break
		count += 1
	if 'PMIList' in str(type(comp)):
		comp.selectedIndex = rowToSelect
	if 'PMITable' in str(type(comp)):
		comp.selectedRow = rowToSelect
	return rowToSelect

```

And I’m calling it from textbox property change event:

```auto
if event.propertyName == "text": 
	rowToSelect = project.mojeskripte.isci(event.source.parent.getComponent('listDobavitelji'), event.newValue)

```