p-autoComplete Pre-select a default value

Question

I am using p-autoComplete in a table, once a row is selected my auto complete should preselect the current value..I tried using [(ngModel)]="row.bsaName" but it is not working. (Once I click on my dropwdown I see all the values, I confirmed the values do exist on my p-autoComplete dropdown)

also Note I used p-calendar which I was able to pre-select the current date once click on edit and not sure why auto complete is different

hTML

        <p-table #dt [value]="iBsaFollowup" dataKey="id" [paginator]="true" [rowsPerPageOptions]="[10,50,100]"
                     [rows]="10">

                <ng-template pTemplate="header">
                    <tr>
                        <th>ID</th>
                        <th>Followup DT</th>
                        <th>Comment</th>
                        <th>BSA Name</th>
                        <th>Action</th>

                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-row>
                    <tr>
                        <td>{{row.ID}}</td>


                        <td>
                            <div *ngIf="!row.isBSAEditable">{{row.followupDate}}</div>
                            <div *ngIf="row.isBSAEditable">

                                <p-calendar name="followupDate" [(ngModel)]="row.followupDate"  [showIcon]="true"></p-calendar> <span style="margin-left:35px"></span>
                                <span *ngIf="isEmpty(row.comment)" style="color:crimson; font-size:8pt">Required</span>
                            </div>
                        </td>
                        <td>
                            <div *ngIf="!row.isBSAEditable">{{row.comment}}</div>
                            <div *ngIf="row.isBSAEditable">
                                                                       <input type="text" [(ngModel)]="row.comment" style="width:95%" maxlength="200">
                                <span *ngIf="isEmpty(row.comment)" style="color:crimson; font-size:8pt">Required</span>
                            </div>
                        </td>


                        <td>
                            <div *ngIf="!row.isBSAEditable">{{row.bsaName}}</div>
                            <div *ngIf="row.isBSAEditable">

                                <p-autoComplete name="bsaNameList" [(ngModel)]="row.bsaName" [suggestions]="iBsaList"   (completeMethod)="searchBsaList($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>

                                <span *ngIf="isEmpty(row.comment)" style="color:crimson; font-size:8pt">Required</span>
                            </div>
                        </td>
                        <td>
                            <div>
                                <modal [row]="row" [disableEditSaveButton]='isEmpty(row.comment)' (deleteRow)="onDeleteToDoList(row)" [showModal]="!row.isBSAEditable" (selectedRow)="onSelectedFollowupdRow(row)" (cancelEdit)="onCancelEdit(row)" (save)="onSave(row)"></modal>
                            </div>
                            <!--<button (click)="editRow(row)">Edit</button>-->
                        </td>

                    </tr>
                </ng-template>

            </p-table>

component

    bsaListVal: IBsaList;
    iBsaList: IBsaList[];
    originalBsaList: IBsaList[];
 searchBsaList(event) {
        this.iBsaList = this.originalBsaList;
        this.iBsaList = this.iBsaList
            .filter(data => data.name.toString()
                .toLowerCase()
                .indexOf(event.query.toString().toLowerCase()) !== -1);

    }
    GetBsaList() {
        this._dashboardService.getBSAList()
            .subscribe(
            data => {
                this.iBsaList = data.result;
                this.originalBsaList = data.result;

            },
            error => console.log('xx Method: ' + 'alert alert-danger'));

    }

interface

export interface IBsaList {

    id: string,
    name: string
}

********************************************UPDATE********************************************** HTML

           <p-autoComplete name="bsaNameList" [(ngModel)]="row.bsaName" [suggestions]="bsaNameArr"   (completeMethod)="searchBsaList($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>

Component

        bsaListVal: IBsaList;
        iBsaList: IBsaList[];
        originalBsaList: string[];
        bsaNameArr: string[];
 searchBsaList(event) {
        this.bsaNameArr = this.originalBsaList;
        this.bsaNameArr = this.bsaNameArr
            .filter(data => data
                .toLowerCase()
                .indexOf(event.query.toString().toLowerCase()) !== -1);

    }
    GetBsaList() {
        this._dashboardService.getBSAList()
            .subscribe(
            data => {
                this.bsaNameArr =  data.result.map(e => e.name);// data.result;
                this.originalBsaList = data.result.map(e => e.name);

            },
            error => console.log('GetAllAccessFor Method: ' + 'alert alert-danger'));

    }

The problem is `row.bsaName` is probably a `string` while the `autoComplete` is populated with `Array of Object` and you indicate the field to be `name`. Binding does not work because of this. — Chau Tran, Jun 15 '18 at 19:11
updated my above code..it is an array of strings...so how would I accomplish that — rgoal, Jun 15 '18 at 19:40
can you map your `IBsaList` to just `string[]`. Something like: `this.bsaNameArr = this.iBsaList.map(bsa => bsa.name)` then use `bsaNameArr` as the `[suggestions]` for your autoComplete — Chau Tran, Jun 15 '18 at 20:28
All{"result":[{"id":"VPXXXX","name":"XXX XXXX"},{"id":"VBXXXX","name":"VBXXXX"},{"id":"VAXXXXX","name":"XXXXX"},{"id":"VPXXXX","name":"XXXXXX"},{"id":"XXXXX","name":""},{"id":"VAXXXX","name":"XXXX XXXX"}]} — rgoal, Jun 15 '18 at 21:31
if i use it works even with my original code (the section before update) why auto-complete will be different? — rgoal, Jun 15 '18 at 22:06
Because optionLabel on Dropdown and field on AutoComplete do not work the same way. You can tell clearly is that `data.result` returns an array of object. Why would you assign both of your string[] to that array of object. I believe if you do `this.originalBsaList = data.result.map(e => e.name)` then `this.bsaNameArr = this.originalBsaList` would work — Chau Tran, Jun 15 '18 at 22:29
updated my above code...searchBsaList function ->.filter(data => data.name.toString()//error name does not exists — rgoal, Jun 15 '18 at 23:00
Oh man, you gotta remove the field property on your autoComplete as well o.O you sure you know what you’re doing? — Chau Tran, Jun 15 '18 at 23:31

score 8 · Accepted Answer · answered Jun 16 '18 at 00:30

8

Just to reconcile everything happened in the comments.

The reason why the autocomplete does not work as expected is because you're binding [(ngModel)] to a string row.bsaName while your [suggestions] is an Array of Object. Hence, binding does not work here. There are couple of ways to fix the issue:

Change row.bsaName or bsaName property on your data to an Object with {id, name} to match the data model of your [suggestions]
Make an array of string e.g: bsaNamesArr: string[] and on your data fetching, map over your data.result to get the name array and assign that to bsaNamesArr this.bsaNamesArr = data.result.map(element => element.name). Now, use bsaNamesArr as the [suggestions] and also use bsaNamesArr in your (completeMethod) as well.

Make sure to remove the field property on your p-autocomplete if you use the 2nd approach.

Good luck!

answered Jun 16 '18 at 00:30

Chau Tran

4,668
1
21
39

one last question....how do I get the selected id not name from my auto complete dropdown. I do have a function that e the selected row, which is working but how d i get the selected id not name frm auto complete onFollowupSave(row) { console.log("BSA UID " + this.bsaNameArr[row]); } – rgoal Jun 18 '18 at 21:45
If you want to display name and get the id on selected, I’d suggest you go with the first approach to have access to the id and the name at the same time. However, you can get the id from the selectedName using Array.find() method. – Chau Tran Jun 18 '18 at 21:47
ok, for simplicity I need to use option 1 as I have more logic based on selection..if I go with option one how would i bind ? excuse my ignorance in advance :) – rgoal Jun 18 '18 at 22:57
@rgoal - You could always filter your arrays before doing the map to a simple array of strings. `array.filter(a => a.prop1 == "condition1").map(element => element.prop1)` – Christo Nel Nov 01 '18 at 14:13

score -1 · Answer 2 · answered May 15 '19 at 10:47

You can use,

 <ng-template></ng-template>

inside the

 <p-autoComplete></p-autoComplete>

tag as I have done in my project. Syntax below:

<p-autoComplete
     pTooltip="'tooltip'"
     [(ngModel)]="student"
     #student_id="ngModel"
     name="student_id"
     [suggestions]="studentsList"
     (completeMethod)="filterStudentsList($event)"
     field="name"
     [size]="30"
     placeholder="Enter Student name"
     [minLength]="1"
     required
     (onSelect)="onSelect($event)">
  <ng-template let-student pTemplate="item">
    {{ student.name }}
  </ng-template>
  <ng-template let-student pTemplate="selectedItem">
    {{ student.id }} {{ student.student_name }}
  </ng-template>

So that if you want to select 2 values from selected suggestions we can do using this.

p-autoComplete Pre-select a default value

2 Answers2