A search page without a "no matching results" message before search is actually performed

A Webflow instructable by Stories Without Endings.

Use case:
You add Webflow search to your CMS based website. The default behaviour of the search page is to tell the user "No matching results". That's feel off from a UX perspective, since the user probably wouldn't expect to see any results before actually performing a search. So the "No matching results" text is superfluous, and as that plain noise in terms of communication with the user.

Ideal behaviour:
Only if the user performs a search, and no results are found, the user should know that no results are found.

Fix approach:
Since Weblow applies a query parameter to the URL, we can use the appearance of "query" in the search page URL to decide whether or not the "no matching results" message should be shown. Note, that the Webflow built-in logic for the Search page ensures that when results are actually found from a search query, the "Empty state" container is hidden, along with any elements inside it.
‍

Steps:
On the Search Utility page in Webflow

1. Locate the text element inside the Empty state element.
2. Set Display to "none".
3. Add the ID "none-found" to the element.
4. Add this code to your page footer:

Place in the Search Utility Page custom code section ("Before </body> tag):

  <script>
  document.addEventListener("DOMContentLoaded", function() {
    var element = document.getElementById("none-found");
    element.style.display = "none"; // hide the element by default
    var url = window.location.href;

    if (url.indexOf("query") !== -1) {
      element.style.display = "block"; // show the element if "query" is in the url
    }
  });
</script>