# Autofill option in text field component vision

**URL:** <https://forum.inductiveautomation.com/t/autofill-option-in-text-field-component-vision/72684>\
**Category:** Ignition\
**Tags:** ignition81, scripting, vision\
**Created:** [April 20, 2023, 5:40am UTC](https://forum.inductiveautomation.com/t/autofill-option-in-text-field-component-vision/72684 "2023-04-20T05:40:36Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Priyanka.Khandge](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/priyanka.khandge/32/35989_2.png) [@Priyanka.Khandge](https://forum.inductiveautomation.com/u/Priyanka.Khandge)\
**Post date:** [April 20, 2023, 5:40am UTC](https://forum.inductiveautomation.com/t/autofill-option-in-text-field-component-vision/72684/1 "2023-04-20T05:40:36Z")

</div>

Hi Guys,

When writing text in the text field component in the vision the autofill option opens. autofill option gets from the database. Can you suggest how to fix this?

Ignition 8.1.17  
MSSQL server 16

Thanks,  
Priyanka

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [April 20, 2023, 7:13am UTC](https://forum.inductiveautomation.com/t/autofill-option-in-text-field-component-vision/72684/2 "2023-04-20T07:13:44Z")

</div>

I am not familiar with this feature. Is this something you are wanting to create, or have you already created it, but you are having some kind of problem?

---

<div class="post-metadata">

**Author:** ![Priyanka.Khandge](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/priyanka.khandge/32/35989_2.png) [@Priyanka.Khandge](https://forum.inductiveautomation.com/u/Priyanka.Khandge)\
**Post date:** [April 20, 2023, 7:23am UTC](https://forum.inductiveautomation.com/t/autofill-option-in-text-field-component-vision/72684/3 "2023-04-20T07:23:05Z")

</div>

@justinedwards.jle Thanks for the replay.

I have written some script in the text field **KeyPressed** but I have no idea how to display a sorted list in the text field when I write any key in the text field.

if len(event.source.text) \> 1:  
autofillQuery = "SELECT CONCAT(FirstName,', ',LastName) AS Name FROM Flexible WHERE FistName LIKE '{event.source.text}%'"  
database = "Test"  
autofillpyDataSet = system.db.runQuery(autofillQuery, database)  
autofillnormalDataset = system.dataset.toDataSet(autofillpyDataSet)  
options =   
if autofillnormalDataset != 0:  
for rowIndex in range(autofillnormalDataset.rowCount):  
Name = autofillnormalDataset.getValueAt(rowIndex, 'Name')  
options.append(Name)  
print options

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [April 20, 2023, 7:23am UTC](https://forum.inductiveautomation.com/t/autofill-option-in-text-field-component-vision/72684/4 "2023-04-20T07:23:36Z")

</div>

Come to think of it, I did create something like this before when I was playing around with a multi select dropdown problem here in the forum:

> [@Multiselect dropdown in Vision](https://forum.inductiveautomation.com/t/multiselect-dropdown-in-vision/58749/7):
>
> I found the time to cobble a template example together. Here is a side by side comparison with the multiSelect dropdown on the left and the standard dropdown on the right: The selected indexes, values, and labels are stored in the template's properties as datasets: [image] [image] Below is the template itself. Feel free to download it, import it, and continue development on it until it suits your needs: [multiSelectButton.zip](https://forum.inductiveautomation.com/uploads/short-url/3o5So0DrM4z8PFlxwLppKbSk5kR.zip) (10.1 KB)

As you can see in the video, the template has a predictive text feature. I believe I layered a label underneath the text field, and made the text field background transparent. The predictive label is then populated with scripting on one of the keypress events. It wouldn't be difficult to add a special key condition to the keyReleased or keyPressed event to move the label text into the actual text field.

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [April 20, 2023, 7:25am UTC](https://forum.inductiveautomation.com/t/autofill-option-in-text-field-component-vision/72684/5 "2023-04-20T07:25:43Z")

</div>

I've also generated a popup menu from a text field component that simulates the functionality of dropdown. Perhaps some or all of the code from this example could help you with what you are trying to accomplish:

> [@\[IGN-6521\]Unable to Search Through Vision Dropdown Component with Keystrokes](https://forum.inductiveautomation.com/t/ign-6521-unable-to-search-through-vision-dropdown-component-with-keystrokes/62964/10):
>
> This seemed like an interesting problem, and I had the night off, so I fiddled around with this and developed a prototype searchable combo box: Version 2 with auto complete and preview selections options enabled and auto resize behavior disabled: While I was at it, I made all of the colors for the dropdown, textbox, and button all independently accessible: [image] I also added a maxRow property that makes the number of rows displayed variable: [image] ...and the width…

---

<div class="post-metadata">

**Author:** ![Priyanka.Khandge](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/priyanka.khandge/32/35989_2.png) [@Priyanka.Khandge](https://forum.inductiveautomation.com/u/Priyanka.Khandge)\
**Post date:** [April 20, 2023, 7:29am UTC](https://forum.inductiveautomation.com/t/autofill-option-in-text-field-component-vision/72684/6 "2023-04-20T07:29:08Z")

</div>

> [@Autofill option in text field component vision](https://forum.inductiveautomation.com/t/autofill-option-in-text-field-component-vision/72684/5):
>
> I've also generated a popup menu from a text field component that simulates the functionality of dropdown. Perhaps some or all of the code from this example could help you with what you are trying to accomplish:

Yes. My requirement same as this but the only difference in my case is no dropdown. In my case using the **text field** component.

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [April 20, 2023, 7:35am UTC](https://forum.inductiveautomation.com/t/autofill-option-in-text-field-component-vision/72684/7 "2023-04-20T07:35:29Z")

</div>

If you import either of those templates, I believe you'll find that in both cases I have elected to use a text field instead of a dropdown. In the first example, I am using the text field to control the visibility of a power table that is positioned underneath the text field. If you wanted to adapt that template to your usage case, simply delete the power table and all scripts involved in populating it.

In the second example, I am using a text field to generate a popup menu that I position underneath the the text field. I populate it with either a jlist or jmenuitems depending on whether or not I am embedding a scroll pane. Of course, for your usage case, the popup menu could be positioned anywhere in relation to the text field.

---

<div class="post-metadata">

**Author:** ![Priyanka.Khandge](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/priyanka.khandge/32/35989_2.png) [@Priyanka.Khandge](https://forum.inductiveautomation.com/u/Priyanka.Khandge)\
**Post date:** [April 20, 2023, 7:37am UTC](https://forum.inductiveautomation.com/t/autofill-option-in-text-field-component-vision/72684/8 "2023-04-20T07:37:37Z")

</div>

@justinedwards.jle Thank you so much.

I will try.

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [April 20, 2023, 8:10am UTC](https://forum.inductiveautomation.com/t/autofill-option-in-text-field-component-vision/72684/9 "2023-04-20T08:10:23Z")

</div>

I was able to accomplish this. My text field has a custom property called `data`. Here is the test contents:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/3/43bbc68bbc8aaf501473e2d7cde25a62a5ff3329.png)

**Here is the result:**

[https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/3/a3351e7513da1d5a15afc199e29f1c3f717089ad.mp4](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/3/a3351e7513da1d5a15afc199e29f1c3f717089ad.mp4)

**Here is the component:**  
[autoFillTextField.zip](https://forum.inductiveautomation.com/uploads/short-url/a3bP6Cg0G5k6QbHpOMazHC1PzK.zip) (4.5 KB)

The enter key triggers the auto complete

---

<div class="post-metadata">

**Author:** ![Priyanka.Khandge](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/priyanka.khandge/32/35989_2.png) [@Priyanka.Khandge](https://forum.inductiveautomation.com/u/Priyanka.Khandge)\
**Post date:** [April 20, 2023, 8:12am UTC](https://forum.inductiveautomation.com/t/autofill-option-in-text-field-component-vision/72684/10 "2023-04-20T08:12:31Z")

</div>

Waa Great. Thank you so much @justinedwards.jle. You are a very helpful person.

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [April 21, 2023, 9:56am UTC](https://forum.inductiveautomation.com/t/autofill-option-in-text-field-component-vision/72684/11 "2023-04-21T09:56:13Z")

</div>

This looks like an idea I want to use, so I developed this a little further. I added a string custom property to the textfield called predictedText as part of a case mismatch correction, and I added a public Boolean custom property to the template itself called autoComplete to make the autocomplete function optional.

In the prototype, I chose not to make the dataset search case sensitive because I imagined that it would make the function more convenient for users, but when a case mismatch occurred, a slight misalignment would appear between the predicted text and the actual text, so I added a function that corrects this. Another problem that I observed was that the caret position moved to zero after the autocomplete was finished. I added code that puts the cursor back at the end of the string after auto complete.

Lastly, I also wanted to use the tab key, but when I tore apart the multiselect template to create the above proof of concept, I was having trouble finding an intuitive way to consume the tab input, so I just went with the enter key. While I still haven't found a traditional way of doing this, I was able to accomplish the same end using the focusLost event handler, so if you would prefer to use the tab key, that is an option.

Here is the updated keyReleased script:

```auto
from java.awt.event import KeyEvent, KeyAdapter
textfield = event.source
predictiveText = event.source.parent.getComponent('predictiveText')
autoCompleteField = event.source.parent
labelIndex = 1 if event.source.parent.Data.columnCount > 1 else 0
def getMatchedCase(text, predictedText):
	caseMatchedText = predictedText
	if len(predictedText) > len(text):
		for letter in range(len(text)):
			if text[letter] != predictedText[letter]:
				caseMatchedText = caseMatchedText[:letter] + text[letter] + predictedText[letter+1:]
	return caseMatchedText
if autoCompleteField.autoComplete:
	if event.getKeyCode() == KeyEvent.VK_ENTER and autoCompleteField.autoComplete:
		textfield.autofill(event)
	else:
		data = textfield.internalData
		text = textfield.text
		textNotFound = True
		for row in range(data.rowCount):
			label = data.getValueAt(row, labelIndex)
			if text.lower() in str(label).lower()[0:len(text)]:
				predictedText = str(data.getValueAt(row, labelIndex))
				textfield.predictedText = predictedText
				predictiveText.text = getMatchedCase(text, predictedText)
				textNotFound = False
		if textNotFound or len(text) < 2:
			predictiveText.text = ''

```

Note that I've changed the name of 'Text Field 1' to 'predictiveText'

For my purposes, I moved part of the script into a custom method that I call autofill that I can call from either the keyReleased or focusLost event handlers. In this way, I can trigger the auto complete from both the tab and enter key without having the same code in two places. Here is the code for the autofill custom method:

```auto
#def autofill(self, event):
	def setCaretPosition():
		textfield.setCaretPosition(len(textfield.text))
	autoCompleteField = event.source.parent
	textfield = event.source
	predictiveText = autoCompleteField.getComponent('predictiveText')
	textfield.text = textfield.predictedText
	predictiveText.text = textfield.predictedText
	textfield.requestFocusInWindow()
	system.util.invokeLater(setCaretPosition)

```

Note that this custom method requires an event parameter

Here is the focusLost script that controls tab key actions:

```auto
textfield = event.source
autoCompleteField = event.source.parent
predictiveText = event.source.parent.getComponent('predictiveText')
if str(event.cause) == 'TRAVERSAL_FORWARD' and autoCompleteField.autoComplete and len(textfield.text) != len(predictiveText.text):
	textfield.autofill(event)

```

The first time the tab key is pressed, the text field retains focus, and auto completes. However, if the auto complete has already occurred or is not an option due to no prediction available, the tab key performs normally and traverses the focus to the next focusable component.

---

<div class="post-metadata">

**Author:** ![Priyanka.Khandge](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/priyanka.khandge/32/35989_2.png) [@Priyanka.Khandge](https://forum.inductiveautomation.com/u/Priyanka.Khandge)\
**Post date:** [April 21, 2023, 11:29am UTC](https://forum.inductiveautomation.com/t/autofill-option-in-text-field-component-vision/72684/12 "2023-04-21T11:29:46Z")

</div>

@justinedwards.jle Thank you so much.

Explain everything in detail and very helpful.

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [June 7, 2023, 2:54am UTC](https://forum.inductiveautomation.com/t/autofill-option-in-text-field-component-vision/72684/13 "2023-06-07T02:54:26Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/4/14fb21458eb89782f705535810f7d41b143315ae.png)

A fully developed version of this is now available on the exchange:

# [Auto Complete Text Field](https://inductiveautomation.com/exchange/2485/overview)

---

<div class="post-metadata">

**Author:** ![Dharani\_T](https://avatars.discourse-cdn.com/v4/letter/d/bc8723/32.png) [@Dharani\_T](https://forum.inductiveautomation.com/u/Dharani_T)\
**Post date:** [December 23, 2023, 7:53am UTC](https://forum.inductiveautomation.com/t/autofill-option-in-text-field-component-vision/72684/14 "2023-12-23T07:53:11Z")

</div>

Do we have similar thing in perspective by any chance?