Angular4 with Azure Search search string not working

Question

I am developing an Angular4 Application with Azure Search. I need to make a call to get products according to a search string. the HTML is:

<input name="searchQuery" class="form-control" id="" [(ngModel)]="query">
<button class="btn btn-default" type="submit" [routerLink]="['/search', query]" (click)="search()">Suchen</button>

the search component:

export class SearchResultQueryComponent implements OnInit {
  public query: string;
  private products: Product[];    

  @Output() searchEvent: EventEmitter<Product[]> = new EventEmitter();
  private searchTerms = new Subject<string>();

  constructor(private route: ActivatedRoute,) {
    this.products = [];
  }

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.query = params.query;
    });
  }

  search() {
    if (this.query != null && this.query !== '' && this.query.length !== 0) {
      this.searchTerms.next(this.query);
      this.azureSearchApiService.search(this.searchTerms, ['brand'], 0)
        .subscribe(p => {
          this.products = p.value;
        });
      this.searchEvent.emit(this.products);
    } else {
      return;
    }
  }
}

the parent component:

searchResult(products: Product[]) {
    if (this.products != null) {
      this.products = products;
    }
  }

the search service:

headers = new Headers();

  constructor(private http: Http, private translate: TranslateService) {
    this.headers.append('Content-Type', 'application/json');
    this.headers.append('api-key', '73E96D367A256255E88DA72931E4CD72');
  }
search(terms: Observable<string>, facets: string[], page: number) {
    return terms
      .distinctUntilChanged()
      .switchMap(term => this.searchEntries(term, facets, page) );
  }

  searchEntries(term, facets: string[], page: number) {
    const requestOptions = new RequestOptions({ headers: this.headers });
    const searchOptions = this.searchOptions(term, facets, page);
    return this.http
      .post('the url....', searchOptions, requestOptions)
      .map(res => res.json())
  }

  searchOptions(searchTerm: string, facets: string[], page: number): any {
    const options = {
      search: '*' + searchTerm,
      facets: [ facets.join(',')],
      // paging
      top: 5,
      skip: 5 * page,
      count: true,
    };
    return JSON.stringify(options);
  }

The problem is: I always receive the same result which is all, although the search term is right. and the second problem is that I have to click the button three times to receive the results. I cannot understand why? and what to do?

any idea could be helpful. thank you

Wrong tag may be? Your code indicates you're using Azure Search. — Gaurav Mantri, May 29 '17 at 09:07
I found a solution for the first problem, I have to add: queryType: 'full' and to delete the * but the second one I could not solve it till now — Samy Sammour, May 29 '17 at 09:15

score 0 · Accepted Answer · answered May 29 '17 at 14:05

0

I found the solution, I used "Redux" framework as a stateful list. and it works for me. the delay was in updating the GUI after the event

answered May 29 '17 at 14:05

Samy Sammour

2,298
2
31
66

Angular4 with Azure Search search string not working

1 Answers1