Using a text field to filter a listbox

[Trent_PE]

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 🙂

[Trent_PE]

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 · Accepted solution]

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();
}

[Trent_PE]

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(); }
        }
     }

[try67]

Sorry for nitpicking, but it's "for all intents and purposes", not "for all intensive purposes"...

[Trent_PE]

Its ok try67, you are correct... You must hang out with my wife 😛 hahaha

I figured a simple method around having the list display as empty...

The list box i have created will only display a maximum of 4 suggestions. in the document level var statement, i have made the first 4 items in the array empty, thus creating the same illusion 🙂

I also added the below code to the list box. This will then on selection populate the text field that the user can choose from. Seems to be working nicely.

if (event.willCommit)
{this.getField("TextField Filter").value = event.value}

This whole practice was to do a customer form where they they can search from over 80 instruments. a dropdown list was not going to be the best.

Thanks for your help Thom! you are a champ! am reading your articles to try to make heads or tales of the code you started me with. i dont know if i will ever completely get my head around it all but its forever a learning experience which i love

[LuckyLuke]

I'm very curious in your solution and looking for the same method. Are you willing to share your solution?

Maybe you can send me a demo pdf that I can look at?

[Rob Hyrons]

Can you share your PDF please? i cannot get the code to work.

Thanks

[try67]

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

[LuckyLuke]

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]

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

[LuckyLuke]

🙂