A wrapper component that combines an input field with a native HTML datalist for autocomplete suggestions. Pass options as content children inside the component.
Provide a unique string to the suggestions input. This binds the input field to the datalist element internally. Include <option> elements as children.
<ply-input-autocomplete suggestions="frameworks"> <option value="Angular"> <option value="React"> <option value="Vue"> </ply-input-autocomplete>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add input-autocomplete
// Paths are relative to aliases.components (default: src/app/components)
import { InputAutocompleteComponent } from './input-autocomplete/input-autocomplete.component';
@Component({
selector: 'app-input-autocomplete-example',
imports: [
InputAutocompleteComponent
],
template: `...`
})
export class InputAutocompleteExampleComponent {}Install
npx ply-ui-cli add input-autocomplete
Run the following command to add this component to your project:
npx ply-ui-cli add input-autocomplete
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-ui-cli add input-autocomplete
// Paths are relative to aliases.components (default: src/app/components)
import { InputAutocompleteComponent } from './input-autocomplete/input-autocomplete.component';
@Component({
selector: 'app-your-component',
imports: [
InputAutocompleteComponent
],
template: `...`
})
export class YourComponent {} API for input-autocomplete — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
ply-input-autocomplete | suggestions | string | '' | A unique ID string to link the input list attribute with the datalist id. |
Content