AutoComplete uses v-model for two-way binding, requires a list of suggestions and a complete method to query for the results. The complete method + gets the query text as event.query property and should update the suggestions with the search results.
+Enabling dropdown property displays a button next to the input field where click behavior of the button is defined using + dropdownMode property that takes "blank" or "current" as possible values. + "blank" is the default mode to send a query with an empty string whereas + "current" setting sends a query with the current value of the input.
+Multiple mode is enabled using multiple property used to select more than one value from the autocomplete. In this case, value reference should be an array.
+AutoComplete can also work with objects using the field property that defines the label to display + as a suggestion. The value passed to the model would still be the object instance of a suggestion. + Here is an example with a Country object that has name and code fields such as {name:"United States",code:"USA"}.
+Item template allows displaying custom content inside the suggestions panel. The local template variable passed to the template is an object in the suggestions array.
+| Name | +Type | +Default | +Description | +
|---|---|---|---|
| value | +any | +null | +Value of the component. | +
| suggestions | +array | +null | +An array of suggestions to display. | +
| field | +any | +null | +Field of a suggested object to resolve and display. | +
| scrollHeight | +string | +200px | +Maximum height of the suggestions panel. | +
| dropdown | +boolean | +false | +Displays a button next to the input field when enabled. | +
| dropdownMode | +string | +blank | +Specifies the behavior dropdown button. Default "blank" mode sends an empty string and "current" mode sends the input value. | +
| multiple | +boolean | +false | +Specifies if multiple values can be selected. | +
| minLength | +number | +1 | +Minimum number of characters to initiate a search. | +
| delay | +number | +300 | +Delay between keystrokes to wait before sending a query. | +
| disabled | +boolean | +false | +When present, it specifies that the component should be disabled. | +
| Name | +Parameters | +Description | +
|---|---|---|
| complete | +
+ event.originalEvent: browser event + event.query: Value to search with + |
+ Callback to invoke to search for suggestions. | +
| input | +value: Value of the component | +Callback to invoke on input event of input field. | +
| focus | +event: Browser event | +Callback to invoke when autocomplete gets focus. | +
| blur | +event: Browser event | +Callback to invoke when autocomplete loses focus. | +
| select | +event.originalEvent: Browser event + event.value: Value of the component |
+ Callback to invoke when a suggestion is selected. | +
| unselect | +event.originalEvent: Browser event + event.value: Value of the component |
+ Callback to invoke when a selected value is removed. | +
| click-dropdown | +
+ event.originalEvent: browser event + event.query: Current value of the input field + |
+ Callback to invoke to when dropdown button is clicked. | +
| clear | +event: Browser event | +Callback to invoke when input is cleared by the user. | +
Following is the list of structural style classes
+| Name | +Element | +
|---|---|
| p-autocomplete | +Container element | +
| p-autocomplete-panel | +Overlay panel of suggestions. | +
| p-autocomplete-items | +List container of suggestions. | +
| p-autocomplete-item | +List item of a suggestion. | +
| p-autocomplete-token | +Element of a selected item in multiple mode. | +
| p-autocomplete-token-icon | +Close icon element of a selected item in multiple mode. | +
| p-autocomplete-token-label | +Label of a selected item in multiple mode. | +
None.
+