Search This Blog

Friday 28 February 2014

Updated: Drop-Down List Control with auto-complete (Searchable Drop-Down List)

I have made some changes to my "Drop-Down List Control with auto-complete" sample. 

To start I would like to explain the title of this sample, as it is really a textbox pretending to be the UI portion of the drop down list and a textbox pretending to be the list portion of drop down list.  I am not sure what I would have called the sample but "Drop-Down List Control with auto-complete" and "Searchable Drop-Down List" came from the title of the first two forum posts I tried to answer with this sample.  It seems we can't update the entries in a drop down list when the list is open, which is why I have tried to mimic the behaviour with these two controls.

The changes I have made are;
  • Display the list when the user enters the field, so the user knows this field is special
  • Show some "ghost text", giving instructions to the user
  • Sort the values in the list
  • Allow for strict scoping
  • Allow for keyboard users, previous the sample only worked with the mouse.

To use this in your own form

  • Copy the subform DropDownList to you own form
  • If you don't want the option to match first characters/match any characters the delete the RadioButtonList under the DropDownList subform.  You may need to update the code in the initialise event of DropDownList subform to set the default option, currently it defaults to match first characters.
  • Change the null display pattern in the Search textbox, to suit the items you are search over.  This is how the "ghost text" is implemented and currently says "'Search by country name".
  • Update the code in the change event of the Search textbox, this is where the matching is performed against the list of countries.  The format of the countries XML list is;
    • <Country>
            <Region>Oceania</Region>
            <Code>36</Code>
            <Name>Australia</Name>
        </Country>
    • So the binding expression for match first characters is;
      '$record.Country.[Lower(Left(Name,' + (xfa.event.newText.length) + ')) == "' + xfa.event.newText.toLowerCase() + '"]'
    • This matches the left characters of the Name element against the characters entered in the Search textbox, xfa.event.newText.  A case insensitive match is made by calling toLowerCase() on the xfa.event.newText and calling the FormCalc function Lower on the Name element.  I find the using FormCalc in binding expressions to be about four times faster.

The sample

For a PDF version of the sample with the countries data already imported download CountriesV2.pdf.  For the XDP template download CountriesV2.xdp and the preview data Countries.xml.

29 comments:

  1. so Nice. I like your each post and solution.

    ReplyDelete
  2. Great info and updates. Couple of questions 1) Is it possible to make the down arrow function as a tab key when in the Search Field? For example, if the user starts typing, rather than tabbing to access the Results/Country List, you'd just hit down arrow (similar behavior to drop down list). 2)As you type, if the CountryList narrows down to one item, can it automatically be chosen?

    Thanks, Tara

    ReplyDelete
  3. Hi Tara,

    I don't think you can detect if an arrow key has been pressed, so I think you are out of luck with your first question.

    For question 2, I think you can get the list to work like you want. It is a bit hacky as the list filtering code is in the change event and in that event we can't update the rawValue. So you have to setFocus on another field that the users can't see and have that field set the rawValue. The problem I have found is once the value has been selected you can't delete characters off the end to make corrections (as it'll auto select the value again). I've uploaded another sample so you can try yourself, https://sites.google.com/site/livecycledesignercookbooks/CountriesV2-AutoSelect.pdf?attredirects=0&d=1.

    Regards, Bruce

    ReplyDelete
  4. Hello Bruce,

    Sorry if me question sounds too simple for you, but could you specify in details how to update the code and change defaults to match any characters.
    Thanks Rokas

    ReplyDelete
    Replies
    1. Hi Kaspar,

      I am not sure what you are after, do you what your users to be able to type in some sort of wildcard character? Maybe an "*" (asterisk) that will match and character? The example I have used here uses FormCalc in the binding expression but you can also use JavaScript, you just use "(" (that is normal brackets) instead of the "[" square brackets. With JavaScript you could then use a regexp. Regards Bruce

      Delete
  5. Hi Bruce,
    Thanks for you reply.
    I want to make a possibility for user to type some sort of charakters with/without "*", I mean with only one default option "Match any characters".
    Regards

    ReplyDelete
    Replies
    1. Hi Kaspar, Can you give me some examples to I'm sure I understand what you are after. Regards Bruce

      Delete
    2. Bruce, sorry if I was not clear enought, but I simply deleted the RadioButtonList under the DropDownList subform, but I do not know how to update the code in the initialise event of DropDownList subform to set the default option to match any characters.
      Regards Rokas

      Delete
    3. Ok, I've got it now. In the initialise event of the subform called DropDownList, at line 6 you will see the statement "item.value = true;" change this to "item.value = false;". Regards Bruce

      Delete
    4. Now it works, Thank you.
      Regards Rokas

      Delete
  6. Great form this is exactly what I need. However when I try to copy the subform into mine own form it loses the country data. How can I achieve this?

    ReplyDelete
    Replies
    1. Hi, I'm pleased you found the same useful. The country data is stored in the data connection (the Countries.xml file above). It sounds like you want the control to be self contained so I have created another version that stored the country data under the extras tag of the drop down list. You can just copy the subform to your form. The updated sample is https://sites.google.com/site/livecycledesignercookbooks/CountriesV2.Extras.pdf?attredirects=0&d=1.

      Note: The list of countries may need to be updated. I have forgotten were I got the list from but it was some time ago. I have used this method for a lot of lists but never an actual country list (except for this sample).

      Delete
    2. This comment has been removed by the author.

      Delete
    3. So if I change the Country.xml (e.g. exchange countries, regions etc.) and want to create a .pdf out of that. How can I do that ? I seem to be doing it wrong :/

      Delete
    4. Hi Val,

      If you are using the CountriesV2.Extras.pdf sample then you will need to edit the XML Source to make any changes the Country data.

      Bruce

      Delete
    5. Is there a way to insert the Region field into the CountriesV2.Extras.pdf without it losing its function it had in the original CountriesV2.pdf ?

      Is there also a way to implement a function, that fills in fields (e.g. Population, spoken languages) automatically, when a country is selected ?

      Delete
  7. Thank you much. This article is so useful for a recent requirement to implement a drop-down with search feature.

    Tarek

    ReplyDelete
  8. I am very glad that I found your article because it is helping me solve a problem for a friend of mine. He is a logistics manager for a federal task force team and we were discussing the use of PDF forms. He asked about what your article specific addresses but I have been having some trouble implementing it into the form. I will include the link to what I have so far but my problem is that I need (4) total description fields that pull from the same list of items in the searchable list box. I also do not know if there is a better way to embed this into the form so that it performs a little bit faster. The other issue is that I would like to scroll through the list box of suggestions but when I click in the box it commits to that selection. Any suggestions? Thank you in advance.

    https://onedrive.live.com/redir?resid=E569E05CC30BC854!20090&authkey=!AA_LgW4wIscrc1k&ithint=file%2cpdf

    ReplyDelete
  9. Hi Wayne, Glad you found the sample useful. I should try and make it easier to implement as I've had a few requests like yours. Anyway I've made some changes and my version is

    https://sites.google.com/site/livecycledesignercookbooks/home/FF143-0-1%20Requisition(BRUCE%20v1.0).pdf?attredirects=0&d=1.

    I've changed your data so that it is now has separate elements for the part number and units (at least that's what I thought they were, but serves as an example). So in the click event of the CountryList object there is some code to populate two other fields.

    txtItemNo.rawValue = result.PartNumber.value;
    numUoM.rawValue = result.Units.value;

    The txtItemNo I just added so the sample had a text field to populate.

    I have only changed a few records to the new format, so it is really quick, but I have used this method with thousands of records before, though maybe the values were not so long, but we should be able to speed it up.

    Anyway, if I'm on the right track contact me via https://forums.adobe.com/people/BR001_ACP, include an email address and we can continue directly.

    ReplyDelete
  10. Hi Bruce,

    Is it possible to convert this LC document to a standalone PDF form, with list data included in the JS and keeping the same functionality?

    The searchable drop-down list is exactly what I'm looking for, but we don't have Adobe LC, only Acrobat DC.

    ReplyDelete
  11. By Adobe LC do you mean LiveCycle Designer? You will need this software to make any amendments to this sample. If you have this software then the list of countries can be populated from an JavaScript object or a E4X literal.

    ReplyDelete
  12. Yeah Adobe LiveCycle Designer. Unfortunately we don't have access to this software, but we do have Adobe Acrobat DC. Would it be possible to recreate in Adobe Acrobat DC?

    ReplyDelete
  13. I am not sure what is possible with the Adobe Acrobat Forms, it is a totally different technology. However, LiveCycle Designer is only a couple of hundred dollars to purchase and there are trail versions available.

    ReplyDelete
  14. Hello
    Thank you for this page and your help
    i want to ask you 2 questions
    1. when i save the CountriesV2.pdf file. functionality of the file (country list) ends. why is that happening (Countries.xml, CountriesV2.xdp CountriesV2.pdf files are in same directory and i am saving as the file with live cycle designer es4 v11)
    2. second question is about the xml file. how do document see xml file; i could not find that code. so i want to use search bar option in my document with totaly different search list. and also if a user find the listed item that they want that choosing will trigger an another sentence that will be located in a textbox
    thank you so much

    ReplyDelete
  15. Hi, When you save the sample make sure you save it as a "Adobe Dynamic XML Form", not a static one. The countries.xml file is set in the File ... Form Properties ... Preview dialog, under Data File. Is there a different value to display in the textbox for each search item, if so you could add another element to the XML file that you could then display in the textbox.

    ReplyDelete
  16. Thank you for your response. here are the screenshots of my situation.
    https://ibb.co/nNCCS7
    https://ibb.co/kJyVEn
    https://ibb.co/i1dmn7
    https://ibb.co/gNsqEn
    i did every step as you said. but i am missing something i think. there is a file size issue as well. somehow livecycle is not including the countries.xml file to the dynamic pdf file.
    and also if i open this newly saved file with livecycle and look that file in the preview mode i can see that countries are there in the list. but if i open that pdf file with acrobat pro or reader the list is empty if i write anything in the textbox.
    thanks again. sorry for taking your time

    ReplyDelete
  17. When you save the file in LiveCycle Designer it does not save the preview data with it. However, you can add the xml file back in with Acrobat. The menu option has changed from version to version, but in Acrobat DC it is under Edit ... Form Options ... Import Data.

    You may also want to look at an alternative developed for deaconf198 above, where the countries.xml data is stored in the extras tag of the dropdown control, you don't need the countries.xml file then, but you will need to edit for forms XML Source to update it.

    ReplyDelete
  18. Dear Bruce;
    with my deep sincerity; you are a great and good guy..
    thank you so and so much

    ReplyDelete
  19. me again. sorry for my inconvenience.
    we are adding appropriate country data to "selectedCountries" array with push method.;
    selectedCountries.push([ country.Name.value.replace(/,/g, "\\,"), country.Code.value]);
    i want to get "country.Code.value" for that selection to a new textfield that i created in the form.
    but i couldn't do it yet. i couldn't call the country code for that selection (with click event on that CountryList)
    how can i do?
    thanks

    ReplyDelete