CODEWITHSUNDEEP
cssangulartypescript
S3ck Stros
S3ck Stros

Reputation: 325

The autocomplete drop-down menu does not show me the data

I'm using an autocomplete. When I click on the input, a dropdown opens with all possible fields to select.

My problem is that the fields do not appear visible, I have already tested using z-index etc and so far nothing has worked.

How can I solve this?

DEMO

Code

<div class="form-group" style="padding-top: 10px;">
    <div class="ng-autocomplete auto">
        <ng-autocomplete [data]="countries" [searchKeyword]="keyword" 
         [itemTemplate]="itemTemplate" [notFoundTemplate]="notFoundTemplate">
        </ng-autocomplete>

        <ng-template #itemTemplate let-item>
            <a [innerHTML]="item.departamento"></a>
        </ng-template>

        <ng-template #notFoundTemplate let-notFound>
            <div [innerHTML]="notFound"></div>
        </ng-template>
    </div>
</div>

Image

As you can see in the image, the information is there, but it does not appear visible :(

Upvotes: 2

Views: 438

Answers (1)

Adrita Sharma
Adrita Sharma

Reputation: 22213

In #itemTemplate, you need to bind name since it is the property in your json

Try like this:

<ng-template #itemTemplate let-item>
    <a [innerHTML]="item.name"></a>
</ng-template>

Working Demo

Upvotes: 3

Related Questions