Using fragment to implement Drop-Down List Field with search / auto populate

[#1]

I have done quite some work to implement Drop-Down List using reusable fragment. Thanks for BR001_ACP​ for the excellent help and support.

Click here to access the latest version of the fragment. To test it, simply create a form with a DDL Field with few items. Attached the fragment to the form, then add on the enter event of the DDL Field this code:

DropDownList.show(this);

I am now finalizing the fragment and facing some minor UI/UX issues and trying to improve to the best possible. Following is a summary of required improvements:

1. How to move the focus to the next field (on the main form) after you press tab when done from the selection on the current DDL Field? Now, when you press tab, the focus is lost.

2. Is it possible to write a loop to, say, attach a script to Enter Event for for all DDL fields.

Suppose I want to add the following line of code for all Drop-Down List fields - Enter Event:

DropDownList.show();

I can do that during design time for all Drop-Down List (DDL) fields one at a time. I was wondering if there is a faster method to do the same using script at run time?

See snapshots below to clarify.

Tarek

[#2]

Please see update here:

Re: Searchable drop down menu?

The work nearly completed, and if you have any question, please let me know.

Tarek

[#3]

I was able to implement a fragment that allows autocomplete for address (search as you type) based on Google Maps APIs.

Now I need to do the same using DMTI services. I was able to write the Javascript code that will perform the search function, but I am not sure how I can implement it in the PDF Javascript that was developed by BR001​.

The problem is that the service must be authenticated before it can be used. This is a sample code:

var request = new XMLHttpRequest();
request.responseType = "json";
var path=encodeURI("https://app2.dmtisxxxx.com/services/restxxx/suggest?limit=60&includePostalCode=true&address=20 crown ste");
request.onreadystatechange= function state_change() {
  if (request.readyState==4){
    // 4 = "loaded"
    if (request.status==200) {
      // 200 = OK
      console.log("response json = ", request.response);
    } else {
      alert("Error retrieving address matches:", response.status, response.statusText);
    }
  }
};
request.open("GET", path, true);
request.setRequestHeader("Authorization", "the-authentication-code");
request.send(null);

Following is the result:

Now the question is how I can implement the above in PDF JavaScript? The main issue is that I have to perform authentication using "setRequestHeader()" before I can call the service url.

Appreciate your help.

Tarek

[#4]

There is another request to do something similar but to apply it on the "Address Field". We want to use something like Google Maps APIs to search as you type or Autocomplete to search address and display the results in a popup. So, upon selection, we need to populate the various related address fields (Street Number, Name, City, Province, Postal Code). I have implemented this in HTML5 with AngularJS.

I will suggest this approach again for Adobe LiveCycle PDF (JavaScript), in addition, will suggest using the Acrobat Popup Menu API "app.popUpMenu()".

Appreciate it if anyone knows if something similar has been implemented.

I think I found what I am looking for here:

Re: Searchable drop down menu?

Thanks to BR001​ ...!

And now the work has been packaged in a fragment, so that it can be easily applied on any field.

The only issue now is to be able to use one fragment across all pages. I am not sure if I place the fragment on the master page, it will work.

Tarek

[#5]

Too bad the proposed solution was not accepted due to look and feel and other usability issues. The effort doesn't worth the value added. Recommended to move to HTML5 or AEM forms (adaptive forms).

Problems with HTML5: most of the script doesn't work with lots of limitations.

Problems with Adaptive Forms: looks like a costly solution and not sure if all developed feature in XFA will be ported without any loss.

Any feedback would be appreciated.

Tarek

[#6]

So far, it is working fine, but there are usability issues.

As you type to locate the item, the form will flicker, which is very annoying effect.

Any idea how to remove this effect?

Tarek

[#7]

I have updated the fragment. Click here to get the final version.

I am still facing the following issues:

1. When selection is made, it should tab to the next field (in the parent form). Now, after selection is made, the field focus is lost.

2. As you type in the search field or as you press back-space, the form will flicker.

See below snapshot to clarify.