Save input value into suggestion list

[Unknown]

Hello,

1.

I want to do something like in this forum question: https://www.syncfusion.com/forums/128854/save-input-values-into-suggestion-list

But instead of using Essential JS1 I want to use Essential JS 2. How can I do that?

Also, how can I get my component widget without jquery? In first version it was like @ViewChild('myComponent') myComponent: EJComponents<ej.AutoComplete, any>; How can I do it with Essention JS2 version?

2. Is there a property to not show empty result text in suggestion list of autocompletebox? I was unable to find it in documentation.

[Keerthana Rajendran]

Dear Customer,   

   

Thank you for contacting Syncfusion Support.   

   

Query: I want to do something like in this forum question: https://www.syncfusion.com/forums/128854/save-input-values-into-suggestion-list   

   

You can add custom values to suggestion list by using addItem method of AutoComplete. In the below sample, we have added a template with Add New item button for adding custom input values.   

   

<ejs-autocomplete id='country' #sample [dataSource]='data' [fields]='fields' (filtering)='onFiltering($event)' [popupHeight]='height' [allowFiltering]='true'   

            [placeholder]='watermark' [showPopupButton]='true' width='300px'>   

            <ng-template #noRecordsTemplate>   

                <div id="nodata"> No matched item, do you want to add it as new item in list?</div> <button (click)="addNewItem($event)" class="e-control e-btn">Add New Item</button>   

            </ng-template>   

        </ejs-autocomplete>   

   

export class CustomValueComponent {   

    // defined the JSON of data   

    public data: { [key: string]: Object; }[] = [   

        { Name: 'Australia', Code: 'AU' },   

        { Name: 'Bermuda', Code: 'BM' },   

        { Name: 'Canada', Code: 'CA' },   

……………………………   

    ];   

       

    @ViewChild('sample')   

    public autoObj: AutoCompleteComponent;   

    public addNewItem = () => {   

        // get the typed characters   

        let customValue: string = (this.autoObj.element.getElementsByClassName('e-input')[0] as HTMLInputElement).value;   

        // make new object based on typed characters   

        let newItem: { [key: string]: Object; } = {'Name': customValue, 'Code': customValue };   

        // new object added to data source.   

        (this.autoObj.dataSource as Object[]).push(newItem);   

        // close the popup element.   

        this.autoObj.hidePopup();   

        // pass new object to addItem method.   

        this.autoObj.addItem(newItem);   

        // select the newly added item.   

        this.autoObj.value = customValue;   

    }   

}   

   

Sample: https://plnkr.co/edit/8e4Cq3pgpXlTNkgPX8KS?p=preview   

   

Query: how can I get my component widget without jquery? In first version it was like @ViewChild('myComponent') myComponent: EJComponents<ej.AutoComplete, any>; How can I do it with Essention JS2 version?   

   

You can get component widget using the below code.   

   

import { AutoCompleteComponent } from '@syncfusion/ej2-ng-dropdowns';       

export class CustomValueComponent {   

    @ViewChild('sample')   

    public autoObj: AutoCompleteComponent;   

}   

   

Query: Is there a property to not show empty result text in suggestion list of autocompletebox? I was unable to find it in documentation.   

   

We have no records template option in AutoComplete. Please refer to the below given document   

   

https://ej2.syncfusion.com/16.1.24/angular/documentation/auto-complete/templates.html#no-records-template   

   

Regards,   

Keerthana.