# Search UI Set Sort Dynamically

**URL:** <https://discuss.elastic.co/t/search-ui-set-sort-dynamically/316020>\
**Category:** Elastic Search\
**Created:** [October 6, 2022, 10:56pm UTC](https://discuss.elastic.co/t/search-ui-set-sort-dynamically/316020 "2022-10-06T22:56:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tchocky](https://avatars.discourse-cdn.com/v4/letter/t/b77776/32.png) [@tchocky](https://discuss.elastic.co/u/tchocky)\
**Post date:** [October 6, 2022, 10:56pm UTC](https://discuss.elastic.co/t/search-ui-set-sort-dynamically/316020/1 "2022-10-06T22:56:41Z")

</div>

Hi all - I am using the React Search UI with Elastic Cloud. I am looking for a way to set the search results order dynamically based on if the search box is populated. The logic is:

- Always default to a sort of `date desc` if the search box is empty (on initial page load, even if facet filters are selected, etc)
- Once the search box is populated the sorting should switch to `_score desc`
- If the search box is cleared sorting should go back to `date desc`

Thanks in advance.

 ![sort_options](https://us1.discourse-cdn.com/elastic/original/3X/6/5/65b26425a4fa4777fd8c6518cafcace5623a9b61.jpeg)

---

<div class="post-metadata">

**Author:** ![joemcelroy](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/joemcelroy/32/103757_2.png) [@joemcelroy](https://discuss.elastic.co/u/joemcelroy)\
**Post date:** [October 10, 2022, 2:38pm UTC](https://discuss.elastic.co/t/search-ui-set-sort-dynamically/316020/2 "2022-10-10T14:38:26Z")

</div>

Hi there,

You can use the `onSearch` hook to change the request state before its called. Below is an example of how you would implement your request:

```nohighlight
onSearch: (requestState, queryConfig, next) => {
    let updatedState = requestState;
    if (requestState.searchTerm === "" && requestState.sortList.length === 0) {
      updatedState = {
        ...requestState,
        sortList: [{ field: "date_established", direction: "desc" }]
      };
    }
    return Promise.resolve(next(updatedState, queryConfig));
  },

```

To highlight:

- using date\_established as an example. You can change this to any date field you require
- Will only add the sorting option if search term is empty
- Will not override the existing sort option

and it working in codesandbox [vigilant-blackwell-3d3478 - CodeSandbox](https://codesandbox.io/s/vigilant-blackwell-3d3478?file=/src/pages/app-search/index.js:1014-1410)

Hope this helps!

---

<div class="post-metadata">

**Author:** ![tchocky](https://avatars.discourse-cdn.com/v4/letter/t/b77776/32.png) [@tchocky](https://discuss.elastic.co/u/tchocky)\
**Post date:** [October 10, 2022, 8:10pm UTC](https://discuss.elastic.co/t/search-ui-set-sort-dynamically/316020/3 "2022-10-10T20:10:03Z")

</div>

Thank you @joemcelroy that is exactly what I was looking for. Is there a documentation page for `onSearch`? I can't seem to find one.

---

<div class="post-metadata">

**Author:** ![joemcelroy](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/joemcelroy/32/103757_2.png) [@joemcelroy](https://discuss.elastic.co/u/joemcelroy)\
**Post date:** [October 11, 2022, 7:05am UTC](https://discuss.elastic.co/t/search-ui-set-sort-dynamically/316020/4 "2022-10-11T07:05:36Z")

</div>

Good to hear! You can find the documentation about this hook and others here [SearchProvider | Elastic docs](https://docs.elastic.co/search-ui/api/react/search-provider)

---

<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:** [November 8, 2022, 7:05am UTC](https://discuss.elastic.co/t/search-ui-set-sort-dynamically/316020/5 "2022-11-08T07:05:37Z")

</div>

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