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

**URL:** <https://discuss.elastic.co/t/we-are-just-getting-started-using-search-ui-library-with-angular-and-struck-with-query-suggestion/319248>\
**Category:** Elastic Search\
**Tags:** elastic-app-search\
**Created:** [November 17, 2022, 10:36pm UTC](https://discuss.elastic.co/t/we-are-just-getting-started-using-search-ui-library-with-angular-and-struck-with-query-suggestion/319248 "2022-11-17T22:36:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![pradeepjanga](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@pradeepjanga](https://discuss.elastic.co/u/pradeepjanga)\
**Post date:** [November 17, 2022, 10:36pm UTC](https://discuss.elastic.co/t/we-are-just-getting-started-using-search-ui-library-with-angular-and-struck-with-query-suggestion/319248/1 "2022-11-17T22:36:01Z")

</div>

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 ?

```auto
 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 ?

---

<div class="post-metadata">

**Author:** ![pradeepjanga](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@pradeepjanga](https://discuss.elastic.co/u/pradeepjanga)\
**Post date:** [November 21, 2022, 2:39pm UTC](https://discuss.elastic.co/t/we-are-just-getting-started-using-search-ui-library-with-angular-and-struck-with-query-suggestion/319248/2 "2022-11-21T14:39:25Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\
**Post date:** [November 21, 2022, 6:35pm UTC](https://discuss.elastic.co/t/we-are-just-getting-started-using-search-ui-library-with-angular-and-struck-with-query-suggestion/319248/3 "2022-11-21T18:35:47Z")

</div>

> [@pradeepjanga](#):
>
> suggestion

Heya!

```auto
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](https://docs.elastic.co/search-ui/api/core/actions#setsearchterm)

So something like this:

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

```

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

---

<div class="post-metadata">

**Author:** ![pradeepjanga](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@pradeepjanga](https://discuss.elastic.co/u/pradeepjanga)\
**Post date:** [November 21, 2022, 7:16pm UTC](https://discuss.elastic.co/t/we-are-just-getting-started-using-search-ui-library-with-angular-and-struck-with-query-suggestion/319248/4 "2022-11-21T19:16:59Z")

</div>

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:

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/b/a/ba050915f77882a74b55460f2564a1cceeb94861.png)

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

```

---

<div class="post-metadata">

**Author:** ![pradeepjanga](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@pradeepjanga](https://discuss.elastic.co/u/pradeepjanga)\
**Post date:** [November 21, 2022, 7:23pm UTC](https://discuss.elastic.co/t/we-are-just-getting-started-using-search-ui-library-with-angular-and-struck-with-query-suggestion/319248/5 "2022-11-21T19:23:19Z")

</div>

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 ?

```auto

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

```

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

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [December 19, 2022, 7:24pm UTC](https://discuss.elastic.co/t/we-are-just-getting-started-using-search-ui-library-with-angular-and-struck-with-query-suggestion/319248/6 "2022-12-19T19:24:10Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.