Enhancing the Resource Search Experience

We recently rolled out improvements to the resource search page with a focus on usability, fallback options, and better user interaction. Whether the page loads fresh or filters are used dynamically, the experience is now more responsive and reliable.

Step-by-Step Improvements

Here’s a brief overview of what we tackled:

1. Initial Setup

We began with a basic HTML form powered by a jQuery script. When a user types a query and submits the form, the script redirects to an external search results page in a new tab, making it easier to expand the search beyond local results.

2. Autofilling via URL Parameter

To enhance continuity across page loads, we added functionality that detects a _search parameter in the URL (e.g., ?_search=query). This value is injected into the search input automatically when the page is loaded.

3. Handling AJAX with FacetWP

Since the page uses FacetWP for AJAX-based filtering, we needed to address two different states:

  • When using AJAX, the search term is stored in FWP.facets.search.
  • On a full page reload, we fall back to the _search URL parameter.

While we explored a hybrid solution that supports both, we ultimately separated them to keep the logic clear and manageable.

4. Final Decision: URL Parameter Only

The final implementation focuses exclusively on full page reloads. When the page loads:

  • We use URLSearchParams to detect the _search value.
  • If found, the value is inserted into #search-input to maintain the user’s search context.

Other UX Enhancements

In addition to the search field logic, we also addressed the following:

  • A clear “No results found” message now appears when applicable.
  • The “Featured” heading is hidden during filtered results to avoid confusion.
  • A backup search bar now appears when filters return no results or when users click “Load More,” helping users retry their query externally.

The Result

These enhancements deliver a smoother, more flexible search experience. Users can maintain their query through reloads, avoid dead ends, and access broader content when needed—without confusion or backtracking.