Q: Removing search query from search bar after clicking into a new vertical

Search
1

Hi everyone, a client reached out and was curious if there was a setting in the config we can set to remove the search query in the search bar once a user clicks into a different vertical?

Here is a video from the client describing her issue video (2:00-2:55).

1 Like
2

Hi Clement,

The current behavior is expected as we want to show the user a continuous search experience rather than a blank page when they click into a different vertical. They may want to search for that same query on a different vertical and that’s why they’re clicking over. Searching on Google works the same way.

For example, in the video the client searches for “Kansas” in the All tab and then clicks over to the Branches tab. We assume the client still has the same intent of looking for something in Kansas and wants to narrow down their search to only Branches (vs seeing all verticals on the All tab).

However, I see the concern when users are searching for something specific to a certain vertical, such as a person or place name. One helpful behavior would be if the user clears their search before navigating to a new vertical. If the user clears the search and you have allowEmptySearch set to true, a blank search will run and return all results for the vertical. Then clicking to a new vertical that also has allowEmptySearch set to true will run a blank search and that vertical and return all results. I can’t tell from the video if you have this turned on - you can either use the x clear button on the search bar or if you manually delete the search like in the video, you’ll have to press enter to run a blank search. Then switching to a new tab will run a blank search as well.

Otherwise, if a user wants to run a completely new search on a new vertical and they don’t run a blank search first, they may see some irrelevant results until they run their desired query. Feel free to have your client submit to the Ideas board if they want to see different search behavior.

1 Like
3

We just had a customer that wanted this same behavior. I ended up overriding and adding custom javascript in the onMount function of the templates/common-partials/script/navigation.hbs component. See below for what I did (not PR reviewed yet so might be changed).

onMount: function() {
  // Remove search query from all nav tabs
  const navItemArr = this._container.querySelectorAll('.js-yxt-navItem');
  navItemArr.forEach((navItem) => {
    const currentUrl = new URL(navItem.href);
    const searchParams = currentUrl.searchParams;
    if(searchParams.has('query')){
      searchParams.delete('query')
      const newParams = searchParams.toString();
      const updatedLink = currentUrl.origin + currentUrl.pathname + '?' + newParams;
      navItem.href = updatedLink;
    }
  });
}