Problem loading data

[matteo]

Hi, I have some problems with autocomplete control.

This is the code I have to replace

<p-autoComplete autoHighlight="true" #AutocompleteInput="ngModel" [(ngModel)]="vAutocomplete"

                                                        forceSelection="true" immediate="true"

                                                        id="Autocomplete"

                                                        [suggestions]="filteredAutocompletes"

                                                        (completeMethod)="filterAutocompletes($event)"

                                                        field="name"

                                                        placeholder="{{'Autocomplete' | localize}}"

                                                        [minLength]="1"

                                                        name="Autocomplete"

                                                        (onSelect)="setAutocomplete($event)"

                                                        (onClear)="setAutocomplete($event)"

                                                        (onKeyUp)="setAutocompleteKU($event)"

                                                        inputStyleClass="form-control"

                                                        styleClass="width-percent-100">

                                        </p-autoComplete>

 

And this is how data are loaded from the backend service

 

filterMyDatas(event): void {

        this._MyService.getDatas(event.query).subscribe(MyDatas => {

            this.filteredMyDatas = MyDatas;

        });

    }

 

loadAutocomplete(v: string): void {

        this.vAutocomplete = null;

        if (v == null)

            return;

        let selectedAutocompletes = new Array<NameValueOfString>();

        let vNV = new NameValueOfString();

        vNV.value = v;

        selectedAutocompletes.push(vNV);

        this._MyService.sendAndGetSelectedDatas(selectedAutocompletes)

            .subscribe((Autocompletes: NameValueOfString[]) => {

                if (Autocompletes != null && Autocompletes.length != 0) {

                    this.vAutocomplete = Autocompletes[0];

                }

            });

    }

and this is the component I'm trying to create

 <ejs-autocomplete #item

            ngDefaultControl

            [allowCustom]='!forceSelection'

            [autofill]='autofill'

            (blur)='onBlur($event)'

            [cssClass]='styleClass'

            (change)='onChange($event)'

            (dataBound)='onDataBound($event)'

            [dataSource]='suggestions'

            [fields]='fields'

            (filtering)='onFiltering($event)'

            (focus)='onFocus($event)'

            [highlight]='highlight'

            [minLength]='minLength'

            [(ngModel)]='ngModel' id='item'

            [placeholder]='placeholder'

            >

            <ng-template #noRecordsTemplate>

                <span class='norecord'>{{'NoItemsFound' | localize}}</span>

            </ng-template>

            <ng-template #actionFailureTemplate>

                <span class='action-failure'>{{'Error' | localize}}</span>

            </ng-template>

            <ng-template #footerTemplate="" let-data="">

                <span class='foot'> </span>

            </ng-template>

        </ejs-autocomplete>

I have to load all data in the syncfusion component and I have to preselect the first item.

Please i would ask to know if you can help me some way

[Sevvandhi Nagulan]

Hi Matteo, 

Greetings from Syncfusion support. 

Query 1: I have to load all data in the syncfusion component. 

 

 

We checked your query of “loading all the data”. We can load all of the data in the autocomplete component by using the showPopupButton property. When you click the icon, the control will show all of the results.  Kindly refer the following code. 

 

 

  <ejs-autocomplete 

    id="products" 

    #remote 

    [dataSource]="data" 

    filterType="StartsWith" 

    [fields]="remoteFields" 

    [query]="query" 

    [(ngModel)]="vAutocomplete" 

    [showPopupButton]="true" 

    (open)="onOpen($event)" 

  ></ejs-autocomplete> 

 

 

Please find the API documentation for the above property. 

 

API link: https://ej2.syncfusion.com/angular/documentation/api/auto-complete#showpopupbutton 

 

Query2: I have to preselect the first item 

 

 

We checked your query of “preselect the first item”.  We would like to let you that we can provide the value of the first item directly into the value property, as mentioned in the following code example to preselect the first item. Kindly refer the following code. 

 

 

      public vAutocomplete:string = 'Maria Anders'; 

 

 

If you don't know the first item's value, you can get it from the popup element li and transfer it to the value property. Kindly refer the below code. 

 

  onOpen(e) { 

    if(!this.isInitial) 

    { 

        this.vAutocomplete = e.popup.element.querySelector('li').innerText; 

        this.isInitial = !this.isInitial; 

    } 

  } 

 

 

Please find the sample below. 

 

Sample link: https://stackblitz.com/edit/angular-1veklp-efpkpj?file=app.component.ts 

 

 

In the above case, when you use the value property to preselect an item, the popup items will be filtered based on the value property provided to the component. It happens in the attached sample when you open the popup for the second time. Since the autocomplete is a filtering-based component, this is the default behavior. Kindly refer the below screenshot. 

 

 

 

 

If want to load the all the data, even if the preselected value is given, then this requirement can be achieved in the ComboBox component. If you need this behavior, we suggest that you to try out the ComboBox component. Please find the demo link for ComboBox component. 

 

 

Demo link: https://ej2.syncfusion.com/angular/demos/#/material/combo-box/default 

 

 

Kindly get back to us for further assistance. 

 

 

Regards, 

Sevvandhi N 

[matteo]

Thanks, but I've still have the problem with the first value.

The Example works only the first time I write in the autocomplete.

If I clear the input, and I write a single letter, I want to be selected the first option in the list.

Very thanks.

[Sevvandhi Nagulan]

Hi Matteo, 

We checked your query of “If I clear the input, and I write a single letter, I want to be selected the first option in the list”. We can use the autofill property to automatically select the first filtered item when searching in input. We recommend that you to use the autofill property for the reported requirement. Kindly refer the following code. 

 <ejs-combobox id='games' #sample [dataSource]='sportsData' [fields]='fields' [(value)]='value' 

        [placeholder]='waterMark' [autofill]="true" [popupHeight]='height'></ejs-combobox> 

Please find the sample below. 

Sample link: https://stackblitz.com/edit/angular-rb2qet-7qnabq?file=app.component.html 

Please find the API documentation link below. 

API link: https://ej2.syncfusion.com/angular/documentation/api/combo-box#autofill 

Kindly get back to us for further assistance. 

Regards 

Sevvandhi N 

[Manuel]

Dear Sevvandhi,

the example provided seems to not work: autofill is not selecting the items has we want.

We have a search method "Contains", the loaded list of items was never autofilled.

The expected behaviour is that we write "st" and the popup gives all the filtered items than if we press "TAB" (without pressing other keys) the first item will be selected.

So for our case is sufficient to have the item on popup selected like in this image

So we want the first item preselected without changing the text input.

Is something we can achieve adding some classes to the list element we can retrieve with 

e.popup.element.querySelector('li')

?

[Sevvandhi Nagulan]

Hi Manuel, 

 

 

Greetings from Syncfusion support. 

 

 

By default, “the autofill property will automatically select the first filtered item when searching in input. This behavior is applicable only for filtering type StartsWith”. However, this is not an option when using the "Contains" filtering. Because, contains filtering will act as StartsWith,Contains and EndsWith type. So it will search for a value using all three types and will return a result based on the matched items from all three types. We didn't know which value we wanted to autofill. This is default behaviou of autofill property.  Kindly check these details and get back to us if you need further assistance. 

 

 

Regards, 

Sevvandhi N