Autocomplete in QAFE using the 'suggest' attribute

Published on: Category: IT development and operations

Here is a quick follow up on the QAFE introduction post by Karizma. About a neat feature: autocomplete.

In QAFE there is a very simple option to apply autocomplete for a textfield. Autocomplete is a feature that automatically predicts the remaining letters in a word based on what has been typed before.

How is this done?

In the textfield set the suggest attribute to 'true'. With the 'suggest-chars' attribute you can define the minimum amount of letters before the suggestion list appears.

  1. <textfield id="autocompleteId" name="autocompleteName" type="text" width="240" suggest="true" suggest-chars="3" />

The next step is to write the bussiness-action and the event to make it work. This textfield needs to listen to the 'onchange' listener type.

  1. <event>
  2. <listeners>
  3. <listenergroup>
  4. <component ref="autocompleteId" />
  5. <listener type="onchange" />
  6. </listenergroup>
  7. </listeners>
  8. <store name="storeAutoCompl" src="component" ref="autocompleteId" />
  10. <business-action ref="autocompleteStreetBusinessAction">
  11. <in name="streetName" ref="storeAutoCompl" />
  12. <out name="suggestionList" ref="suggestionList" />
  13. </business-action>
  15. <set component-id="autocompleteId" ref="suggestionList">
  16. <mapping key="id" value="streetId" />
  17. <mapping key="value" value="streetName" />
  18. </set>
  19. </event>

When you type a minimum of 3 letters in the textfield, the bussiness-action gives you a list of streetnames as output (in this case the suggestionList). This list contains a streetId and streetName for every record.

To make sure the suggestion list appears you need to set the results for the textfield. This is done by using the 'set' option. In the 'component-id' attribute you need to fill in the textfield id and the 'ref' is referencing to the output list generated by the bussiness-action.

The last thing you need to do is the mapping, which you can see in the example.

I hope this post will be helpful to other QAFE users out there.

Mellisa Michely-Kartowikromo
About the author Mellisa Michely-Kartowikromo

Software Developer at Qualogy. My specialties include: Building effective relationships, Communication, ICT, Customer Service, Telecommunications. I'm easygoing and I like to laugh.

More posts by Mellisa Michely-Kartowikromo