title: PrimeNG auto-complete dropdown setup with Angular
body: <p>auto-complete is not working , dropdown is loaded the first time and once i try to type something is not filtering then dropwdown values are gone
  service.ts</p>
  
  <pre><code> getUserLocations(UserID: string, allList:string  ) {
          return this._http.get(environment.BASE_API_URL + 'xxxxx/' + ID + '/' + allList)
              .map((response: Response) =&gt; response.json())
                .do(data =&gt; console.log('locations ' + JSON.stringify(data)))
              .catch(this.handleError);
      }
  </code></pre>
  
  <p>compnent.ts</p>
  
  <pre><code>        brand: any [];
          filteredBrands: any[];
         GetUserLocations(PNSLUID: string, allList: string) {
                     this._searchService.getUserLocations(ID, allList)
                  .subscribe(
                  data =&gt; {
                      this.brand= data.result.name;//not sure how to bind the id
                  },
                  error =&gt; console.log('GetControls Method: ' + &lt;any&gt;error, 'alert alert-danger'));
          }
  
     filterBrands(event) {
          this.filteredBrands = [];
          for (let i = 0; i &lt; this.brand.length; i++) {
              let brand = this.brand[i];
              if (brand.toLowerCase().indexOf(event.query.toLowerCase()) == 0) {
                  this.filteredBrands.push(brand);
              }
          }
      }
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;p-autoComplete  [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="30"
                                                  [minLength]="1" placeholder="Office" [dropdown]="true"&gt;
                                      &lt;ng-template let-brand pTemplate="item"&gt;
                                          &lt;div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5"&gt;
  
                                              &lt;div style="font-size:18px;float:right;margin:10px 10px 0 0"&gt;{{brand}}&lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/ng-template&gt;
                                  &lt;/p-autoComplete&gt;
  </code></pre>
  
  <p>The issue is it is not populating the auto-complete dropdown..there s an issue with binding  </p>
  
  <p>*************************************************UPDATE*****************************************************
  issue: example: my dropdown has the following values</p>
  
  <ol>
  <li><p>region a</p></li>
  <li><p>region b</p></li>
  <li><p>region c</p></li>
  <li><p>HBV office</p></li>
  <li><p>Di  office</p></li>
  </ol>
  
  <p>if I type region auto-complete does not work it still display all values, however, if I select region b then start removing b then auto complete works..in other words..it works only if I select a value but if I start from empty text and start typing it does not work</p>
  
  <p>html </p>
  
  <pre><code> &lt;p-autoComplete name="OfficeList" [(ngModel)]="val" [suggestions]="results" (completeMethod)="search($event)"  field="name" dataKey="id" [dropdown]="true"&gt;&lt;/p-autoComplete&gt;
  </code></pre>
  
  <p>interface</p>
  
  <pre><code>export interface IOffices {
      id: number,
      name:string
  }
  </code></pre>
  
  <p>component</p>
  
  <pre><code>    val: IOffices;
      results: IOffices[];  
      originalResults: IOffices[];
  
   GetUserLocations(PNSLUID: string, allList: string) {
                this._searchService.getUserLocations(PNSLUID, allList)
              .subscribe(
                data =&gt; {
                    this.results = data.result;
                   this.originalResults = data.result; 
            },
            error =&gt; console.log('GetControls Method: ' + &lt;any&gt;error, 'alert alert-danger'));
              })
      }
  
  search(event) {
              console.log("result 2 : " + this.originalResults.length.toString());
      console.log("event : " + event.query.toString());
  
      this.results = this.originalResults;
  
      this.results = this.results.filter(data =&gt; 
         data.name.indexOf(event.query) !== -1);
  
      }
  </code></pre>