Adding a Global Search using Refine

Simply put, is there a way to do refine(searchQuery) without using a search box? So I can pass any query and generate the hits without a SearchBox widget?

Here’s extra details if you don’t understand:

I’m trying to figure out a way to implement a global search on the nav bar on my react website. So originally, I had the searchbox just in the search page and that worked perfectly. It also included URLs so any search would result in a URL being generated and being able to read from the URL and being able to share it.

Now, I’m shifting the search bar to the Nav bar, so that a user can search from anywhere in the app(similar to Amazon). So if a user is on a non search page such as their dashboard, the search is still available in the nav bar at the top of the page. The user simply types in a query then it navigates to the search page with the query. Is there a way to implement this? I was able to generate a URL exactly like how a readable one would be generated and pass that, but this will not generate the hits.

Hi @nabeelasghar156, if I understand what you are trying to achieve correctly, you can use the search from the JavaScript API client. Would that work?

1 Like

Yes this is part of the answer. Is there a way to pass those hits to a CustomHits component then?

Hi @nabeelasghar156, you can create your own display of the results, or you can customize the ui with a connector passing in your results. If you have trouble getting it to work, a codesandbox would be helpful to help troubleshoot. We have an instantsearch starter template here.

Basically, I have my navbar component which is generated on each page. This doesn’t contain any algolia code. All it contains is other information for the website and a search bar that simply generates the url needed for aloglia to search on the search page:

Navbar.js

  const handleSubmit = (objValues) => {
    props.history.push("/search/?" + qs.stringify(objValues) + "&page=1");
  };

This generates a url so that the URL friendly search aloglia on the actual search page can read it from the url and display it. With this, I got rid of the SearchBox on the search page but getting rid of it doesn’t allow me to refine the results from the url.

Search.js

const createURL = (state) => `?${qs.stringify(state)}`;

const searchStateToUrl = (props, searchState) =>
  searchState ? `${props.location.pathname}${createURL(searchState)}` : "";

const urlToSearchState = (location) => qs.parse(location.search.slice(1));

class Search extends Component {
 state = {
     searchState: urlToSearchState(this.props.location),
     lastLocation: this.props.location,
   };
 render() {
    return(
      < InstantSearch
                indexName="photographers"
                searchClient={client}
                searchState={this.state.searchState}
                onSearchStateChange={this.onSearchStateChange}
                createURL={createURL}
              >
      < ConnectedSearchBox />
      < /InstantSearch> )}
      < ConnectedHits />
      )}

Getting rid of the ConnectedSearchBox , it not being needed because the search should work via URL in the navbar then breaks the search and searching doesn’t happen.

Hi @nabeelasghar156, can you provide the url that your handlesubmit produces? Also, putting your code in a codesandbox will help us debug faster with your data. You can find the starter template here.

Here’s a sandbox that I created: https://codesandbox.io/s/mystifying-microservice-k04d0

If you edit the URL to display https://k04d0.csb.app/home you’ll see the navbar on top. If you search from there, it’ll navigate to the search page which is correct. However, you’ll notice there are now two search boxes in this page. The actual Algolia one, and the nav bar. Searching on either will display results, however, you can’t have two search boxes. I only want to keep the one in the navbar. If I remove the SearchBox from the Search.js file, the whole thing stops working. Is there a way to solve this?

HI @nabeelasghar156, thank you for the codesandbox. I have hidden the searchbox with css on line 55 in the app.css file in this forked codesandbox. This allows the searchbox component to still be on the page, but is hidden to the user. Will this work for your use case?

Yeah I did something similar to that on my end, I was just worried about performance. Would this impact the performance significantly or will it be alright?

It shouldn’t affect performance. If you notice any performance issues, let us know.

So there’s one little hiccup. If I copy and paste a URL with a search query, the search box doesn’t get updated with that query; it just remains blank.

@nabeelasghar156, I’m not sure I understand. When I past a url in this url it works on this sandbox.

The search works but you see the search box is empty.

I was able to figure it out, I just needed to add another state to hold that value while refreshing. Thank you for your help Cindy! The Algolia Team has been wonderfully helpful over the last couple months!