Save input values into suggestion list

[Agne]

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]

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:   

http://www.syncfusion.com/downloads/support/forum/128854/ze/AutoComplete-631852772   

   

You can also use allowAddNew property with Visual Mode. Refer to:   

https://help.syncfusion.com/api/js/ejautocomplete#members:allowaddnew    

   

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]

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]

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.