Typo3 Formidable > Reference > elements > renderlet:AUTOCOMPLETE

renderlet:AUTOCOMPLETE

The renderlet :AUTOCOMPLETE is very useful on search engines. It helps the user to find out the information he needs, by proposing him something when he's typing (on mouse press).

So, this control will be usually used into a renderlet:SEARCHFORM or even in collaboration with a simple renderlet:BUTTON.

You can see below a common example of autocomplete on google search engine :

Autocomplete on google search

This renderlet will basically generate an HTML like :

Code HTML generated by renderlet:AUTOCOMPLETE

The list of choices is generated dynamically, based on Ajax Requests, and it is triggered when the user types something into the input text. So, the time of response is optimal.

What is great with this control is that you can specify a /datasource to the list of choices. In fact, this option is required to be set. So, when the user types something, than a query is made on the database in order to update the list of proposals. You can also order and limit the list of choices from your datasource.

It is required to specify the list of /childs to be rendered on this control and how to be rendered with the aid of a /template file. You must specify at least one child for the rendering of this control. 

All these configurations makes from this renderlet a powerful control.

Reference

Go to Top
path data type req default uobj description
all     This control has applied all the common properties of renderlet.

See renderlet:* section for the complete list of common properties to use.
searchonfieldsstring
  
   Specify the list of fields from /datasource, comma separated, where will be searched the input text.

Example: 
  1. searchonfields="cn_short_en,cn_iso_3"
searchtypestring
  
inside  Set up the search type.
The available choices are:
  • begin: Search all the items having the input text at the beginning of /searchonfields
  • inside: Search all the items having the input text inside of /searchonfields
  • end: Search all the items having the input text on the end of /searchonfields
timeobserverint
  
0.75  Set up the time passed before each execution of Ajax Request (in milliseconds).
itemstylestring    Set up the inline styles that must be applied to each item of this choices list.

Example: 
  1. itemstyle="width:245px; padding-left:5px; line-height:18px;"
itemclassstring ameosformidable-rdtautocomplete-item  Set up the name of CSS class to apply to each item from current choices list. It is recommended to use a class name instead of inline styles.
selecteditemclassstring selected  Set up the name of CSS class applied on an item when the mouse is passing over it.
datasource/ :
Specify which datasource is used to populate this renderlet:AUTOCOMPLETE.

Example: 
  1. <datasource use="countrylist" limit="10" orderby="country" orderdir="ASC" />
datasource/usestring
  
   Set up the name of datasource:* where will be searched all the choices.
It is also required to define /childs and /template sections in order to be able to display the list of choices.
datasource/limitinteger 5  Specify the max number of items to show on this list of choices.
datasource/orderbystring tstamp  Specify the field used to sort the list of choices.
datasource/orderdirstring DESC  Specify the way how the list of choices will be sorted: ASC or DESC.
template/ :
Set up the template file used to design the /childs area of this renderlet:AUTOCOMPLETE.

The /template and /childs sections are only used to design the list of choices, and not the linked input text. For, the input text, consider the use of /style or /class properties.

Example: 
  1. <template path="fileadmin/v1/templates/tmpl.html" subpart="###mytext###" alternaterows="###ROW###" />
template/pathstring
  
 
  
 Set the absolute path of template file.
template/subpartstring
  
 
  
 Set the name of subpart used to render the list of choices.
template/alternaterowsstring
  
 
  
 Set the name of subparts used to render each type of item for the current choices list.

In the following example, all the odd items is rendered using the subpart ###ODD_ROW### and all the even items by using ###EVEN_ROW###: 
  1. alternateRows="###ODD_ROW###, ###EVEN_ROW###"
If all the items have the same design, then you can simply set up this: 
  1. alternateRows="###ROW###"
childs/ :
Set up the list of childs to display into this renderlet:AUTOCOMPLETE, according with his datasource.
It is required to define at least one child in order to have a rendered list of choices.
You can simply customize the design of choices with the aid of a template file (see the section /template).

So, here you can describe the list of childs for this control; where each child represents a renderlet:* and allows the nesting of elements inside your application.

Example: 
  1. <childs>
  2. 	<renderlet:TEXT name="country" readonly="true" />
  3. 	<renderlet:TEXT name="iso_code" readonly="true" />
  4. </childs>
And the according template file: 
  1. <!-- ###mytext### begin -->
  2. <div class="first">Proposal of countries:</div>
  3. <!-- ###ROWS### begin-->
  4. 	<!-- ###ROW### begin-->
  5. 	{country} - {iso_code}
  6. 	<!-- ###ROW### end-->
  7. <!-- ###ROWS### end-->
  8. <div class="last">{autocomplete_search.numrows} choices</div>
  9. <!-- ###mytext### end -->