We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Multiple ejAutoComplete in Angular 2

Thread ID:

Created:

Updated:

Platform:

Replies:

126245 Oct 3,2016 11:57 PM Nov 7,2016 07:29 AM JavaScript 5
loading
Tags: ejAutoCompleteTextBox
John Kim
Asked On October 3, 2016 11:57 PM

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 [Syncfusion]
Replied On October 5, 2016 08:50 AM

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.   
   
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
Replied On November 3, 2016 07:31 PM

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 [Syncfusion]
Replied On November 4, 2016 08:30 AM

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, 

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

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
Replied On November 5, 2016 11:30 PM

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 [Syncfusion]
Replied On November 7, 2016 07:29 AM

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, 

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

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;