ResultsCount Modifications

Search Search UI React
1

Hello -

I’d like to modify the text displayed in the ResultsCount React component. The default text displayed is “X Results” with X being the count of results. I would like the text to vary depending on the results of the query. Is there a simple way to do this? I’ve not been able to find a property that handles the text specifically (rather than the styling).

2

Hey Zuri,

In this case the ResultsCount component doesn’t offer that level of customizability. If you want to update your text display I recommend building your own component using the useSearchState hook. You can learn more about that here.

So for example:

const resultsState = useSearchState((state) => state.vertical.resultsCount)

Best,

Daniel

1 Like
3

Thanks for your help with this. Wondering if you can also point me to how I can access the actual search input from the user. Using the useSearchState hook i’ve been exploring all props available on state. I would expect to be able to access it in state.query.input or state.query.mostRecentSearch (see below) but both are returning undefined:

const queryInput = useSearchState(state => state.query.input)

const queryInput = useSearchState(state => state.query.mostRecentSearch)

Hope this makes sense!

4

Hi Zuri,

Both of those should do the trick. The latter will only have a value once a search has been sent, while the former will show you the current text in the SearchBar component.

Are you using the SearchBar component or the FilterSearch component? My only thought for why this might not be working is because you are using the FilterSearch component, which doesn’t have an input, it actually sets static filters instead.

Hope this helps!

5

Thanks Daniel. I am indeed using FilterSearch. I am using it to search for store locations and it seems to work. I input NY for example and I get a list of stores in the NY area. Can you help me understand what you mean by it “doesn’t have an input”? I’d like to avoid changing it to SearchBar if I can.

6

Got it, makes sense!

The way FilterSearch works is that as the user types, we return a dropdown list of potential field values for them to select. A user cannot run a search without first selecting an option from that dropdown. Once an option has been selected, we set a static filter on the api request with the selected field value. The input, which is a separate parameter of the api request, remains blank.

I agree that you shouldn’t change your implementation, instead you should take a look at the static filters state to see what option a user has selected like so:

const filterState = useSearchState((state) => state.filters.static);

7

Got it. Thanks for the response. I’ve inspected the static filters and I was hoping to see something related to what I entered into the search (New York, NY). Instead I got the below. Looks like there’s a filter with a value of lat and long coordinates. I’m guessing I need to somehow convert these coordinates to city?

Screenshot 2023-12-08 at 3.29.40 PM
Screenshot 2023-12-08 at 3.29.40 PM1016×548 44.1 KB

8

Hey Zuri,

The static filters state should also contain a displayName property which shows you the value of what the user actually selected in the dropdown. If you are using your own ‘onSelect’ behavior in FilterSearch then what you will have to make sure you do is set the state with the displayName. You can do that like so:

const handleFilterSelect = ({
    newFilter,
    newDisplayName,
    setCurrentFilter,
  }: OnSelectParams) => {
    setCurrentFilter(newFilter);
    const locationFilter: SelectableStaticFilter = {
      filter: newFilter,
      selected: true,
      displayName: newDisplayName,
    };
    searchActions.setStaticFilters([locationFilter]);
};

<FilterSearch
        searchFields={[
          { fieldApiName: "builtin.location", entityType: "location" },
        ]}
        onSelect={handleFilterSelect}
/>

Let me know if that solves your issue!