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.

Save input values into suggestion list

Thread ID:

Created:

Updated:

Platform:

Replies:

128854 Feb 13,2017 02:01 AM Feb 15,2017 05:07 AM Angular 3
loading
Tags: ejAutoCompleteTextBox
Agne
Asked On February 13, 2017 02:01 AM

Hello,

I want to ask is there a possibility to add input values into autocomplete suggestion list (or maybe I need to use another component to do that)? I want to form autocomplete text box suggestion list from values that was inserted into text box (without using database). I don't need that values to save anywhere, because it must be used just in one users session. And I want to do that on some button click in interface or keyboard enter click.

For example:

I insert value 'ABC' and press keyboard enter button or interface button GO. I want that 'ABC' value and later another values appears in suggestion list where now there is 'No suggestions'. And after that if insert, for example, 'A', I want to see as a suggestion all values that was inserted before that contains letter 'A'.

Arun Palaniyandi [Syncfusion]
Replied On February 14, 2017 04:00 AM

Hi Agne,   
   
Thanks for contacting Syncfusion Support.   
   
Query 1: ”I want to ask is there a possibility to add input values into autocomplete suggestion list (or maybe I need to use another component to do that)?”   
   
Yes, there is possibility to add the input values into the autocomplete suggestion list.    
To add our items to the Autocomplete suggestion, first we need to take the input values from the Autocomplete input text and then push that value to the Autocomplete data source to render in the suggestion list on button click.   
   
   
  onClick(event) { 
                var input = $('#myautocomplete').val(); 
                if (input.length > 0) { 
                    var obj = $("#myautocomplete").ejAutocomplete("instance");  
                    obj.model.dataSource.push(input); 
                    obj._doneRemaining();  
                } 
   
  
   
Query2: ”I want to see as a suggestion all values that was inserted before that contains letter 'A'.   
   
You can get all the values that were inserted so far that contain letter 'A' by setting the filterType property as “contains”.   
   
   
HTML: 
 
        <input type="text" id="myautocomplete" ej-autocomplete [dataSource]="dataList" [filterType]="filtervalue" watermarkText="Select a Car" 
               [highlightSearch]="true" [showPopupButton]="true" width="100%" /> 
TS: 
          this.filtervalue= ej.filterType.Contains;  
     
  
   
We have also prepared a sample for your convenience below:   
   
You can also use allowAddNew property with Visual Mode. Refer to:   
   
If the provided sample does not meet your requirement, please give us more information that will help us to provide the solution at the earliest.    
   
Regards,   
Arun P.   
  
 


Agne
Replied On February 14, 2017 07:18 AM

Hello,

it is very helpful, exactly what I need! But I have one more problem.

Instead of class="ejinputtext" I want to use that input as ej-button like this:
            <input class="col-xs-2" ej-button id="myButton" [height]="searchByOthentComponent" (click)="onClick($event)" />
            <input type="text" id="myAutocomplete" ej-autocomplete [dataSource]="dataList" [filterType]="filtervalue" [highlightSearch]="true" [showPopupButton]="true" />

But there are the problem - when I click on button, the event onClick fires two times. How I need to prevent it from fireing second time?


Arun Palaniyandi [Syncfusion]
Replied On February 15, 2017 05:07 AM

Hi Agne,  
 
Thanks for your update. 
 
We can reproduce the reported issue in our end. For Button control, initial click event raises from Angular due to native HTML input element tag. Latter click event triggers due to ejButton. We can identify origin of EJ event using “model” (event argument). So, please use the below code to prevent the “click” event triggering from Angular.   
    
[HTML]   
<input ej-button id="myButton" [height]="searchByOthentComponent" (click)="onClick($event)" />   
[TS]     
onClick (event) {     
      if (! ej.isNullOrUndefined(event.model))      
      {     
        //your change event code.  //where event.model comprises of model values of ejButton   
        console.log ("Button Click Event Triggered.");            
        //event.model doesn’t present in the event raises from angular     
      }         
    }      
 
Please let us know if you have any queries. 
  
Regards,   
Arun P. 


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.

;