Auto Complete Component

Import in Your Component

import { VuiAutocompleteComponent } from '@vui/auto-complete';

@Component({
  standalone: true,
  imports: [VuiAutocompleteComponent],
  template: `
    <ng-vui-autocomplete
      [data]="suggestions"
      [searchKeywords]="searchFields"
      (selectedItem)="onItemSelected($event)"
      placeholder="Search...">
    </ng-vui-autocomplete>
  `
})

export class AutoCompleteExample {
  cities = [
    { id: 1, name: 'New York', country: 'USA' },
    { id: 2, name: 'Los Angeles', country: 'USA' },
    { id: 3, name: 'Chicago', country: 'USA' }
  ];

  searchFields = ['name', 'country'];

  onItemSelected(item: any): void {
    console.log('Selected:', item);
  }
}