Suggestions box doesn't show up despite successful HTTP response

[ar27111994]

Hi, my suggestions are not showing in Ionic 3.9.2 and Angular 5.0.3. Please help! I've literally tried each and everything but search suggestions just won't show up. Please help! @kadoshms

Service Code:

@Injectable()
export class FilterNameServiceProvider extends DataServiceProvider implements AutoCompleteService  {

    labelAttribute = "name"
    getResults(name: string) {
        return Observable.fromPromise(this.fetchData('product/autocomplete', { filter_name: name })).mergeMap((res) => {
            if(!res['isNotAuthenticated']) {
              delete res['isNotAuthenticated'];

              return res;
            }
        })
    }

}

Template Code:

<ion-header>
  <ion-toolbar>
    <ion-title>{{ button_filter | htmlDecode }}</ion-title>
    <ion-buttons start>
      <button ion-button icon-left clear item-start (click)="dismiss()">
        <ion-icon name="close-circle"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
      <ion-auto-complete class="overflow" item-content [(ngModel)]="filter_name" [dataProvider]="nameAutocomplete" [options]="{ placeholder: entry_name | htmlDecode }"></ion-auto-complete>
</ion-content>

Fetched Response from Server:

Browser Output:

even tried this CSS:

.overflow {
        contain: none; 
        overflow: visible;
 }

In addition, I've also tried using it without ngModel, used it in an Ionic page (instead of a Modal popup), used it inside an ion-list, used it without placeholder, used it with dataprovider returning a string array (instead of the current objects) from http observable, and even tried using it with a function instead of a service provider etc. But Alas! all in vain.

[kadoshms]

what version of the plugin are you using?

[ar27111994]

version 1.6.2-alpha

[kadoshms]

@ar27111994 when your'e running with ionic serve do you see any error in the console? Can you print out the results of the getResults? (what it actually returns to the component)

[ar27111994]

no, there's no error in the console. Here are the results of getResults function:

[ar27111994]

[kadoshms]

@ar27111994 well this is definitely odd. Does it also happen when you are using it in a regular flat page? (I mean - without ion-list)? I tried some pieces of your code and it seemed fine

[ar27111994]

yes, absolutely, I've tried it in a regular page in both header and content areas, but with the same result.

[ar27111994]

@kadoshms maybe look at my service provider and see if I'm doing everything according to the docs? I hope that labelAttribute is the name of the property in each of the array objects that we wanna show in and select from the search suggestions.

[ar27111994]

even uninstalled and re-installed the npm package:

but to no avail.

[ar27111994]

sorry, button pressed by mistake.

[ar27111994]

ok, I've finally got it working but with different code and without authentication check. Here's the updated code:

getResults(name: string) {
        return Observable.fromPromise(this.getData('api_token')).mergeMap((token) => {
              let postData = new FormData();
              postData.set("api_token", (token) ? token : ''); 
            return this.http.post(BASE_URL + API_URL + "product/autocomplete&filter_name=" + name, postData, {headers: this.headers})
            .map(
                result =>
                {
                return result;
                });
            }).catch(this.handleError);
    }

[ar27111994]

But, it's still not working in ion-list, even with item-content attribute and the following CSS:

.overflow {
        contain: none; 
        overflow: visible;
 }

[ar27111994]

ok, my mistake, I was including ion-item alongside item-content attribute. Now, the only mystery that remains is that why wasn't it working with the previous service code. Anyways, I'm closing this issue, as I have found a workaround, you can look around and find the actual problem if there is one, while using my code.