We are just getting started using Search UI library with angular and struck with query suggestion

[pradeepjanga (pradeep)]

I see there is autocompleteQuery in Search Driver. I did set that but it is not calling querySuggestions api call. how can i trigger that ?

 this.searchDriver.setAutocompleteQuery({
          suggestions: {
            types: {
              documents: {
                fields: ['study_title']
              }
            }
          }
        })

I tried below :
this.searchDriver.getActions().setSearchTerm(this.searchInputValue);

It is still invoking search.json api. how can i trigger query suggestion api through seach UI library ?

[pradeepjanga (pradeep)]

I see there is this hooks, how can i apply this in angular ?

  onSearch?: onSearchHook;
    onAutocomplete?: onAutocompleteHook;
    onResultClick?: onResultClickHook;
    onAutocompleteResultClick?: onAutocompleteResultClickHook;

[JasonStoltz (Jason Stoltzfus)]

@pradeepjanga

suggestion

Heya!

this.searchDriver.getActions().setSearchTerm(this.searchInputValue);

This is the correct way to do it, you just need to pass some additional configuration.

https://docs.elastic.co/search-ui/api/core/actions#setsearchterm

So something like this:

this.searchDriver.getActions().setSearchTerm(this.searchInputValue, { autocompleteResults: true });

Sorry, I realize that wasn't very intuitive from our docs!

[pradeepjanga (pradeep)]

Then how can we manage the results. Right now we are using the below code to render the results for the search. But for query suggestion we don't need to refresh result instead we only need title needs to be under search. something like this:

 this.searchDriver.subscribeToStateChanges(state => {
      this.searchState = state;
    });

[pradeepjanga (pradeep)]

I think the refresh did the trick. But how to get the results from the query suggestion api and store them.

Since subscribing to state change won;t work since i made refresh=false.
any other way ?

 if(this.searchInputValue) {
        this.searchDriver.getActions().setSearchTerm(this.searchInputValue, {autocompleteSuggestions: true, refresh: false }  );
      }

    this.searchDriver.subscribeToStateChanges(state => {
      this.searchState = state;
    });