• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Using a text field to filter a listbox

Explorer ,
Jan 14, 2020 Jan 14, 2020

Copy link to clipboard

Copied

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 🙂

TOPICS
Acrobat SDK and JavaScript

Views

993

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jan 14, 2020 Jan 14, 2020

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

...

Likes

Translate

Translate
Explorer ,
Jan 14, 2020 Jan 14, 2020

Copy link to clipboard

Copied

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 😞

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 14, 2020 Jan 14, 2020

Copy link to clipboard

Copied

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 PDFScripting
Use the Acrobat JavaScript Reference early and often

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 15, 2020 Jan 15, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 15, 2020 Jan 15, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 15, 2020 Jan 15, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 07, 2020 Mar 07, 2020

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 19, 2022 Jan 19, 2022

Copy link to clipboard

Copied

LATEST

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

 

Thanks

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 07, 2020 Mar 07, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 09, 2020 Mar 09, 2020

Copy link to clipboard

Copied

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?

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 09, 2020 Mar 09, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 09, 2020 Mar 09, 2020

Copy link to clipboard

Copied

🙂

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines