# Autocomplete: show selected option in the result component

**URL:** <https://discuss.elastic.co/t/autocomplete-show-selected-option-in-the-result-component/270910>\
**Category:** Elastic Search\
**Tags:** elastic-site-search\
**Created:** [April 21, 2021, 11:08pm UTC](https://discuss.elastic.co/t/autocomplete-show-selected-option-in-the-result-component/270910 "2021-04-21T23:08:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Daniel\_Pacheco](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/daniel_pacheco/32/77811_2.png) [@Daniel\_Pacheco](https://discuss.elastic.co/u/Daniel_Pacheco)\
**Post date:** [April 21, 2021, 11:08pm UTC](https://discuss.elastic.co/t/autocomplete-show-selected-option-in-the-result-component/270910/1 "2021-04-21T23:08:15Z")

</div>

Hello, I´m trying to implement the search-ui with an elasticsearch API, based on the example provided in the library I have managed to make everything works except for the Autocomplete.

I´m seeing the autocomplete options, and I can select them, and I register the clicks on them, but I can´t find a way to show the selected autocomplete option, in the results component.

This is my configuration:

```auto
    const config = {
      debug: true,
      hasA11yNotifications: true,
      onResultClick: () => {
        /* Not implemented */
      },
      onAutocompleteResultClick: async ({ documentId, query, ...args }) => {
        /* Not implemented */
        let requestBody = buildSearchByIDQuery(documentId);
        const json = await runRequest(requestBody);
        let state = buildState(json);
        return state;
      },
      onAutocomplete: async ({ searchTerm }) => { 
        const requestBody = buildRequest({ searchTerm });
        const json = await runRequest(requestBody);
        const state = buildState(json);
        return {
          autocompletedResults: state.results
        };
      },
      onSearch: async state => {
        const { resultsPerPage } = state;
        const requestBody = buildRequest(state);
        // Note that this could be optimized by running all of these requests
        // at the same time. Kept simple here for clarity.
        const responseJson = await runRequest(requestBody);
    // const responseJsonWithDisjunctiveFacetCounts = await applyDisjunctiveFaceting(responseJson, state, ['visitors', 'states']);
        // return buildState(responseJsonWithDisjunctiveFacetCounts, resultsPerPage);
        return buildState(responseJson, resultsPerPage);
      }
    };

```

I´m able to get the documentID and even make the query but I don´t know how to display the result.

---

<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:** [May 3, 2021, 3:38pm UTC](https://discuss.elastic.co/t/autocomplete-show-selected-option-in-the-result-component/270910/2 "2021-05-03T15:38:14Z")

</div>

@Daniel_Pacheco What is currently happening when a user selects an option from the dropdown? What would you like to happen instead?

---

<div class="post-metadata">

**Author:** ![Daniel\_Pacheco](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/daniel_pacheco/32/77811_2.png) [@Daniel\_Pacheco](https://discuss.elastic.co/u/Daniel_Pacheco)\
**Post date:** [May 7, 2021, 3:52pm UTC](https://discuss.elastic.co/t/autocomplete-show-selected-option-in-the-result-component/270910/3 "2021-05-07T15:52:19Z")

</div>

Hi @JasonStoltz thanks for the response. Right now after a user selects an option, the results section do not change, keeps showing the results of the previous search, or it stays empty if no search was performed.

---

<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:** [May 10, 2021, 12:07pm UTC](https://discuss.elastic.co/t/autocomplete-show-selected-option-in-the-result-component/270910/4 "2021-05-10T12:07:43Z")

</div>

It looks like you're trying to perform the new request in `onAutocompleteResultClick`.

You do not need to perform the new request in the `onAutocompleteResultClick` handler. That handler is predominantly used for things like click tracking and analytics.

There are two things that the autocomplete can show. Results and Suggestions.

By default, if you click on a Suggestion, Search UI will trigger a new search which ultimately calls the `onSearch` you have implemented.

If you click on a Result, Search UI will open the result page for that result, based on whatever you have configured for `urlField`: [search-ui/ADVANCED.md at master · elastic/search-ui · GitHub](https://github.com/elastic/search-ui/blob/master/ADVANCED.md#example-using-autocomplete-suggestions-and-autocomplete-results)

---

<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:** [June 7, 2021, 12:07pm UTC](https://discuss.elastic.co/t/autocomplete-show-selected-option-in-the-result-component/270910/5 "2021-06-07T12:07:49Z")

</div>

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