Allow a user to filter the items in a dropdown

Start here

First thing is to drag a dropdown onto the Designer page. This can be a standard dropdown or a custom dropdown.

Then in the Object > Field palette, tick "Allow custom text entry". This will allow the user to type directly into the dropdown value area. 

Enter event

The script in the enter event will open the dropdown list as soon as the user clicks into the value area or tabs into the field. This means that the user does not have to manually click the dropdown arrow, they can just start typing in their input.  

This uses the openList method, where the parameter is the name of the dropdown object (myEmployees):

// Open the dropdown list on the enter event
xfa.host.openList("myEmployees");

That's it! 

That is it, just implementing both of these into your dropdowns will work. 

The user will be able to type into the value area and as they do, the list will be filtered to match their case-sensitive inputs. 

You could stop there, but there is one issue that may be a show stopper for you. In the first step, we set up the dropdown to allow custom text entry. This means that the user could type in a string that does not actually match any of the items in the dropdown. Effectively, when the user exits the dropdown, it could be displaying a value that was never intended by you. 

Never fear! 

There is an easy solution. If you have a look at the sample form, there is a simple script in the exit event that looks at the user's input and compares it to the items in the dropdown list. If these match, then no problem, just exit the field. 

However if the user's input does not match any of the items in the list, then the script will null the dropdown value, issue a warning beep and give the dropdown a light red shading. 

Here is the script in the exit event of the dropdown: 

// Check that the user has not typed in a value
// that does not exist in the list. If they have
// then clear the dropdown. 

// First create an array of the items in the 
// dropdown list.
var vUserInput = [];
for (var i=0; i<this.length; i++) {
   vUserInput.push(this.getDisplayItem(i));
}

// Check that the value is not in the array
if (this.rawValue !== null && vUserInput.lastIndexOf(this.rawValue) === -1) {
   this.rawValue = null; // clear the dropdown
   xfa.host.beep("3"); // audio alert to the user
   this.ui.oneOfChild.border.fill.color.value = "255,225,225"; // red
}

This should be sufficient to highlight to the user that they need to go back and amend their selection. 

Sample form

The form is available at the end of this recipe and also  here. 

Enjoy!