Primeng: how to add other value to the input AutoComplete Multiple ?

[ducduongtmb]

I want to use it like a tags input autocompete . But when I use the input AutoComplete Multiple of primeFace , I just enter defaut value text (what I config in code before ) , can't pass my text to the input AutoComplete Multiple . Thanks for any help .

[kamran-pervaiz]

@ducduongtmb did you find anything about it? because i want to use tag based dropdown as well

[schellmax]

also interested in a solution to this ('Tag input with autocomplete AND "add new" option'):

• 'AutoComplete' doesn't allow for adding new values
• 'Chips' doesn't have an autocomplete for existing values

[elega9t]

Hi,

I would like to use autocomplete multi with support for adhoc strings aswell. Is it possible?

[sourabh8003]

@elega9t
@schellmax

Hi Guys,

It is possible to add new values as chips in autocomplete multi. I have created a custom component with the help of chips and autocomplete components and its working fine for me. So you can also try to merge these two features in a single component or if you still need that feature then i can share my components with you guys. Just let me know in such case.

[elega9t]

@sourabh8003

Wow, thats great news. Do you mind creating a github sample project and share your component.

Thanks

[sourabh8003]

@elega9t

Sure

[sourabh8003]

Hi guys,

@elega9t @ducduongtmb @ducduongtmb

Currently i am working on a downstream repository of prineNg. It will take some time so for now you can use below code to add new values in autocomplete with chips, tab click also adds chips. Follow the steps below and in case of any issue reply me:

s-autocomplete.components.txt

Step 1> update the paths with your node_module folder path with primeNg in the include file

import {InputTextModule} from '../../../../node_modules/primeng/components/inputtext/inputtext';
import {ButtonModule} from '../../../../node_modules/primeng/components/button/button';
import { ttTooltipModule } from './tt-tooltip.directive';
import {SharedModule, PrimeTemplate} from '../../../../node_modules/primeng/components/common/shared';
import {DomHandler} from '../../../../node_modules/primeng/components/dom/domhandler';

Step 2> Import the custom autocomplete module "SAutocompleteWithChipsModule" in your module.

Step 3> use the compnent with the primeNg's original attributes but with new selector "s-autoComplete"

Then Enjoy!

[doeringp]

My solution for having an autocomplete component (for multiple tags) with the the possibility of adding custom texts was using the onKeyUp-event. I've implemented an event handler that adds my custom text to the list, each time I press the Enter key.

Code sample: https://stackblitz.com/edit/angular-kfvj5p

[bkhushang]

@doeringp : Kudos.. You saved my so many hours.... Thanks.

[yagizozturk]

@doeringp : Thank you very much

[Antilamer1709]

@doeringp thanks, exactly what I have been looking for!

[PrathyushaRecherla]

My solution for having an autocomplete component (for multiple tags) with the the possibility of adding custom texts was using the onKeyUp-event. I've implemented an event handler that adds my custom text to the list, each time I press the Enter key.

Code sample: https://stackblitz.com/edit/angular-kfvj5p
@doeringp can you help in fixing the same with outside click event. I have to add the value when user enter some letters and clicks outside of the input field.

[earshinov]

For those coming here from Google, here is a request to have this feature built in: https://github.com/primefaces/primeng/issues/3211

[jncalderon]

thanks!! nice job!! helpful for me, regards!

[jBuchholz590]

I used a similar approach listening for changes to the autoComplete's value and then adding the current value to the list of entries:

Template

<p-autoComplete (keyup)=inputChanged($event)" [suggestions]="existingPlusCurrent" ...>

Controller

existing: [] // some list of values to be used
existingPlusCurrent: [] // array that is used by the autoComplete

inputChanged(event: KeyboardEvent): void {
    const value = event.srcElement.value;
    if (this.existing.indexOf(value) === -1) {
      this.existingPlusCurrentLabel = [value, ...this.existingLabels];
    } else {
      this.existingPlusCurrentLabel = this.existingLabels;
    }
}

This way one can select the value as expected from the dropdown.