primeng icon indicating copy to clipboard operation
primeng copied to clipboard

Add HTML5 datalist Autocomplete to Chips

Open fisherstevenk opened this issue 2 years ago • 0 comments

###Defect Fixes When submitting a PR, please also create an issue documenting the error.

###Feature Requests Due to company policy, we are unable to accept feature request PRs with significant changes as such cases has to be implemented by our team following our own processes.

============================================== This would be a Feature Request. It's a minor one however. Instead of p-chips having a simple HTML input, we can leverage the HTML5 datalist and the list attribute for the input tag.

We need to know the input tag id, so it cannot be null. Typically I'd use a uuid, but I didn't want to include other packages so the id is based on a simple static counter. This also allows us to then know and set the datalist id to bind to the input list attribute.

Usage example:

tags: string[]; autocompleteResults: string[]; search($event); // some method that sets autocompleteResults

<p-chips [(ngModel)]="tags" (keyup)="search($event)" [suggestions]="autocompleteResults" [allowDuplicate]="false">

AC-Chips AC-Chips-Pulldown AC-Chips-typing

fisherstevenk avatar Mar 06 '22 16:03 fisherstevenk