Inspiring

Answered

Using a text field to filter a listbox

Forum|Forum|6 years ago
January 15, 2020
2 replies
3587 views

Hi, I am hoping to achieve a dynamic dropdown like functionality using a text field and list box.

The purpose of this is because from what i have seen, there is no functionality in Adobe or javascript templates to begin from to be able to filter a dropdown from keystroke actions.

I have seen suggestions to use a textfield for users start typing to then dynamically filter by keystroke a listbox below. they can then select from the listbox and the selection will populate the textfield. this would essentially emmulate a dropdown style.

ie. if a user typed "j"/"ja"/"jan" it would display the words "Janus" or "January" to show in the listbox.

I have found some example scripts for livecycle using xfa script connections and xml files to do this, but nothing for acrobat.

I am intermediate at javascript, but for this i dont know where to begin. I am guessing maybe to use thisgetField("").search or thisgetField("").match functionality... but i just done know where to begin.

Debating whether i will need 3 fields to complete this,

A - text field for user entry,

B - listbox for user selection which will populate A on selection

C - hidden listbox with all of the selections listed in which to populate B

If anyone has any ideas on where to get started, or reference material which could work in Acrobat it would be greatly appreciated 🙂

This topic has been closed for replies.

Correct answer Thom Parker

I think you have a solid idea.

You can learn about list functionality and keystroke scripts here:

https://www.pdfscripting.com/public/main.cfm

And for free here:

https://acrobatusers.com/tutorials/list_and_combo_in_lc/

https://acrobatusers.com/tutorials/print/formatting_text_fields/

To implement this you'll need the list to be in a variable.

A document level variable would be a good way to do this.

var aFruitList = ["Apples","Oranges","Watermelons","Grapes"];

Then, use a keystroke script in the text field to dynamically filter the list and load it into the list field.

In this script "FruitList" is the name of the list field.

This script uses the Array.filter function, which is only available in Acrobat/Reader DC, not in earlier versions.

if(!event.willCommit)
{
	var aFull = event.value.split("");
	aFull.splice(event.selStart, event.selEnd - event.selStart, event.change);
	var rgTest = new RegExp(aFull.join(""),"i");
	if((aLst = aFruitList.filter(function(a){return rgTest.test(a)})).length)
		this.getField("FruitList").setItems(aLst);
	else 
		this.getField("FruitList").clearItems();
}

try67

Community Expert

This can be easily done using this (paid-for) tool I've developed: http://try67.blogspot.com/2012/11/acrobat-create-live-filtered-list.html

L

LuckyLuke

Inspiring

Thanks, I downloaded it and tried it, but I needed a result when I double click the filtered list. So I thought let me look a bit further and then I found a thread from try67 where there was a double click on a List field. After some try and fail I build it myself 🙂 Sorry! But thanks for all the hints!

Are you really dutch? Not far from Antwerp?

try67

Community Expert

Not originally, but I speak it. And no, I don't live in that neck of the woods any longer...

Mae_RVTAuthor

Inspiring

sorry... I realised my description wasnt the best so here is an example...

If a list box contains:

1. Apples

2. Oranges

3. Watermelons

4. Grapes

If a user entered into textbox1 the letter R the listbox would display:

2. Oranges

3. Watermelons

4. Grapes

if the user entered "RA" the listbox would display

2. Oranges

4. Grapes

I know there is an easier way to explain this... but i have been awake for 22 hours and counting 😞

Thom Parker

Correct answer

Community Expert

I think you have a solid idea.

You can learn about list functionality and keystroke scripts here:

https://www.pdfscripting.com/public/main.cfm

And for free here:

https://acrobatusers.com/tutorials/list_and_combo_in_lc/

https://acrobatusers.com/tutorials/print/formatting_text_fields/

To implement this you'll need the list to be in a variable.

A document level variable would be a good way to do this.

var aFruitList = ["Apples","Oranges","Watermelons","Grapes"];

Then, use a keystroke script in the text field to dynamically filter the list and load it into the list field.

In this script "FruitList" is the name of the list field.

This script uses the Array.filter function, which is only available in Acrobat/Reader DC, not in earlier versions.

if(!event.willCommit)
{
	var aFull = event.value.split("");
	aFull.splice(event.selStart, event.selEnd - event.selStart, event.change);
	var rgTest = new RegExp(aFull.join(""),"i");
	if((aLst = aFruitList.filter(function(a){return rgTest.test(a)})).length)
		this.getField("FruitList").setItems(aLst);
	else 
		this.getField("FruitList").clearItems();
}

Thom Parker - Software Developer at PDFScriptingUse the Acrobat JavaScript Reference early and often

Mae_RVTAuthor

Inspiring

Hi Thom,

Once again, you are an absolutely amazing man... have a bit of reading to do tonight, but from a basic play it looks good! I made some minor tweaks to make it slightly more generic and added display code to the onfocus and onblur actions to make it look like a dropbox showing up.

For all intensive purposes, the code that you send should clear the list box when the event value is empty... for some reason it is not though. Any ideas? I have tried a few different variations including layering if statements using event.value != "" (also tied !==). I also tried including the parethasis around the statements that you did not have, but to no avail.

See the code i have in use now below

//This script is in the Keystoke Custom Format a text field for user entry
//nPopList is a document level var statement for the list box to choose from
//For pop-up like functionality display.visible/hidden on focus and blur actions for aListF

//aListF is the List box to display filtered results below text field
var aListF = this.getField("ListBox Filter");

  if (!event.willCommit)
    {
     if (event.value != "")
       {
        var aFull = event.value.split("");
	   aFull.splice(event.selStart, event.selEnd - event.selStart, event.change);
	   var rgTest = new RegExp(aFull.join(""),"i");
	if ((aLst = nPopList.filter(function(a){return rgTest.test(a)})).length)
	  { aListF.setItems(aLst); }
        else 
          { aListF.clearItems(); }
        }
     }

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded