The <crm:autocompleteWithIcon> tag is used to display an input element with icon on the page that provides the user prompt suggestions while the input is being typed into the input box.
Attributes
| Name | Required | Type | Default | Description |
|---|---|---|---|---|
| className | true | String | null | The class name of the value of the component |
columnClasses | false | String | ui-grid-col-12 | Comma separated list of column style classes of the gird layout that will be used to display the component. |
| completeMethod | true | Boolean | false | The name of the client side method to provide suggestions. |
| columns | false | Integer | 1 | Number of columns of the gird layout that will be used to display the component. |
| displayValue | false | String | null | The displayed value of the component in view mode. At least one of the attributes displayValue or itemLabel must be specified. |
| dropdown | false | Boolean | false | Enables dropdown mode when set true. |
| forceSelection | false | Boolean | true | When enabled, autoComplete only accepts input from the selection list. |
| icon | true | String | null | Icon of the button as a css class. |
| id | true | String | null | Unique identifier of the component. |
| itemLabel | false | String | null | Label of the suggestion item. At least one of the attributes displayValue or itemLabel must be specified. |
| labelKey | false | String | null | A valid key defined in translation properties file. Its translation through the glossary will be used as the presentable name of the component. |
| managedBean | true | String | null | The name of the managed bean that will be used for retrieving the component values. |
| maxResults | false | Integer | 20 | Maximum number of results to be displayed. |
| minQueryLength | false | Integer | 1 | Number of characters to be typed before starting to query. |
| mode | false | String | The mode of the managed bean. | The mode of the component. Allowed values are VIEW and EDIT. |
| multiple | false | Boolean | false | Flag indicating that multiple selection is enabled or not. |
| onChangeFunction | false | String | null | Defines the function call triggered when input element loses focus and its value has been modified since gaining focus. |
| parameters | false | String | null | Defines the parameter that will be used from the onChangeFunction function call. |
| placeholder | false | String | key_type_to_search | A valid key defined in translation properties file. Its translation through the glossary will be used as a short hint that describes the expected value of this input element. |
| process | false | String | @this and the value of the refresh attribute | Component(s) to process in partial request. |
| readonly | false | Boolean | false | Flag indicating that this component will prevent changes by the user. |
| refresh | false | String | @this | Component(s) to update with ajax. |
| tip | false | String | null | A valid key defined in translation properties file. Its translation through the glossary will be used as an advisory tooltip information. |
| value | true | Object | null | The value of the component. |
| visible | false | Boolean | true | Controls the visibility of the component. |
Getting Started with AutocompleteWithIcon
The following example shows an autocomplete with icon component.