Follow

Input > Autocomplete

Use the Input: Autocomplete control in the Capriza Designer to create a text field or text area in the Zapp that displays autocomplete options as the user types.

Select "Autocomplete" from the Input drop down in the Designer Toolbar.

Autocomplete.png


Select the text field that you’d like to capture as part of your Autocomplete element. Begin typing so that several suggestions show up.
Click to include this autocomplete.


Screen_Shot_2017-05-22_at_3.21.49_PM.png

If your autocomplete field is not detected by Capriza, hold down the Alt key and click to manually define it. In this case, you will be prompted by the Designer to select all relevant entries.

Screen_Shot_2017-05-22_at_3.17.29_PM.png

Select all relevant items, and then click again within the autocomplete field to save.

Screen_Shot_2017-05-22_at_3.17.39_PM.png

The Designer will then ask you to verify the text of the selected items.

Screen_Shot_2017-05-22_at_3.17.46_PM.png

The Capriza Designer now adds an autocomplete text field to your Zapp.  



Screen_Shot_2017-05-22_at_3.17.58_PM.png

 

Styling Options

Several styling options are available via the In Line Editor (ILE).

Screen_Shot_2017-05-22_at_3.18.09_PM.png

  • Presets: Choose between Standard, No Gutter, and Full Border layouts.

  • Display: Vary the width of the input field.
     
  • Input Type: Setting a data type for a text input element invokes different keyboards for added convenience and efficiency for the user. Please see Mobile First Features for more information.

  • Show as Modal: If toggled on, the autocomplete search suggestions appear in another page. If toggled off, the suggestions appear below the autocomplete field.

  • Content Max Length: Limits the length of the text user can enter in a text field.

  • Placeholder: The text input here refers to the gray text that is displayed in or above the autocomplete field. The default placeholder is "Search."

  • Text: Change various aspects of the control's text and label. See Text & Label Styling Options for more information.

  • Icon: Choose an icon, position (left/right), and icon color to include in the control.

  • Suggest Recent Values: Includes recently selected values as the first suggestions within autocomplete.
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.