Multiple ejAutoComplete in Angular 2

[John Kim]

Hello,

I have an ejAutoComplete widget in a 'search' component and it gets reused in multiple views.

I found that when there is more than one 'search' component in the view, things don't work properly. ( Only one of them works )

I also tried to set id of the input tag dynamically but it did not help.

Is there a way to reuse a component with ejAutoComplete widget in it?

Or will I have to create multiple components even if they all have same functionality?

Thanks!

[Narayanasamy Panneer Selvam]

Hi John Kim,   

   

Thanks for Contacting Syncfusion support.   

   

To be clear, we have created suggestion list based on its ID, so we need to give a unique ID for each Autocomplete text boxes. We had prepared a sample based on your requirement and it works fine.   

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/angular2-467293625    

   

If it is not your exact requirement, please let us know the scenario want to use same Autocomplete in multiple views. How you have set ID dynamically and do you mean input element as “more than one 'search' component”?  else share us as ample with your exact requirement.   

   

   

Regards,   

Narayanasamy P.  

[John Kim]

Hello Narayanasamy,

Thank you for your response.

I have a component called 'patient-search' and ejAutoComplete is inside it.

And I planned to put 'patient-search' component simultaneously in multiple sections.

Now, I tried to pass string id through Input() from the parent component but it did not work.

It seems ejAutoComplete gets created before id is assigned dynamically.

I see at the end of HTML, '_suggestion' gets created but the last one overwrites the previous one.

Is there a way to delay the creation of ejAutoComplete?

Or create it manually after view is initialized?

Thanks!

[Ezhil S]

Hi John, 

Thanks for the update. 

Query 1: I have a component called 'patient-search' and ejAutoComplete is inside it. And I planned to put 'patient-search' component simultaneously in multiple sections.  

 

The reported issue with multiple Autocomplete instance that overwritten by last widget is a known issue and we have fixed it in our latest Service Pack 1 for Volume 2(v14.3.0.52). Using the latest version we can create a component with “ejAutoComplete” and use it in multiple sections.   

Query 2: Now, I tried to pass string id through Input() from the parent component but it did not work. It seems ejAutoComplete gets created before id is assigned dynamically. 

You can dynamically set ID for components using the Input(), which will set the ID for corresponding component. You can also modify the ejAutocomplete properties dynamically in ngAfterViewInit() method. 

Refer the following link, 

https://angular.io/docs/ts/latest/api/core/index/AfterViewInit-class.html  

We have prepared sample based on your requirement that is available in the link below: 

http://www.syncfusion.com/downloads/support/forum/126245/ze/Autocomplete1606088001  

If this isn’t your required scenario, can you please share us code sample on how you are setting ID dynamically and where you need to delay Autocomplete creation? So that we can provide you an alternative solution. 

 

Regards, 

Ezhil S 

[John Kim]

Thank you for your continued assistance.

I ran your DEMO code but it does not work as is.

<h2>Multiple Autocomplete</h2>

<input type="text" class="patient-search" ej-autocomplete [dataSource]="states" />

<br />

<input type="text" class="patient-search" ej-autocomplete [dataSource]="states" />

<br />

<input type="text" class="patient-search" ej-autocomplete [dataSource]="states" />

Without unique ID's it does not work even with the Service Pack.

When I gave unique ID's, they worked fine.

Here is HTML part of my code, I simplified it as much as possible.

FILE : patient-search.component.ts

<input type="text"
       [id]="htmlId"
       [dataSource]="patients"
       [watermarkText]="watermarkText"
       [highlightSearch]="highlightSearch"
       [width]="width"
       [minCharacter] = "3"
       [multiColumnSettings]="multiColumnSettings"
       [fields]="fields"
       (change)="ejAutocompleteChange($event)"
       (select)="ejAutocompleteSelect($event)"
       ej-autocomplete #ejAutocomplete
/>

Then in part of other components, I use it as

<cleo-patient-search
  [htmlId]="'fromTask'"
  [hidden]="newTaskForm.get('isSpecificPatient').value === 'false'"
  (selectPatient)="selectPatient($event)"
>

</cleo-patient-search>

As you can see, since we need unique ID's, I tried to pass 'htmlID' as Input() to the patient-search component.

But it does not work.

At the end of the HTML generated, I see there should be div with id='<id_of_each_input>_suggestion'.

However, I only see one div with id='_suggestion' which is missing passed ID.

Thanks!

[Ezhil S]

Hi John, 

Thanks for the update. 

We were unable to reproduce the reported issue with creating Autcomplete instances with same class in version 14.3.0.52. Can you please ensure the scripts and CSS file version in your application? Or else use the below CDN references in your project, 

Scripts: http://cdn.syncfusion.com/14.3.0.52/js/web/ej.web.all.min.js   

Angular 2: http://cdn.syncfusion.com/14.3.0.52/js/common/ej.angular2.min.js  

CSS: http://cdn.syncfusion.com/14.3.0.52/js/web/flat-azure/ej.web.all.min.css  

We have prepared sample and video demo for the shared code to render multi-column Autocomplete, 

Sample link: http://www.syncfusion.com/downloads/support/forum/126245/ze/Autocomplete_Multicolumn158465914  

Video link: http://www.syncfusion.com/downloads/support/forum/126245/ze/angular2_autocomplete-748385536  

If still you are facing issue with rendering multiple Autocomplete component, please share us a simplified sample or modify our sample to reproduce your issue. So that we can provide you an alternative solution. 

                 

Regards, 

Ezhil S