Show search term on search result page

Design help General
1

Hey hive,

I am looking for a way to display the search term that a user enters in Site Search on the results page.
Example: User searches for “Weddings” and on the results page should be the text “Results for Weddings”.

I have already found 2 posts in the forum, unfortunately both are unanswered and thus unsolved. Very depressing.

Since this little thing is a big UX thing, I hope that someone has an idea to make it happen.
Maybe you, @vincent, know a workaround for this?

Hopefully - Dennis from Vibrand Design

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

Check what I did on my site www.man1fest.me, I’m using the field to complete a sentence. I could have styled the field with no background and padding so it could look exactly like a normal sentence, but I chose the in between way of keeping the field recognisable, for a better usability. But I’m sure you can do it and add a new blanck search field to the page.

image
image1181×606 228 KB

2 Likes
3

Many thanks @vincent, I can rely on you!
This solution is of course also very charming, especially in terms of usability. Thanks for the food for thought!

Can you still think of a solution how to display the text outside the search field?

4

Nope :slight_smile: You can probably make the search field look like exactly the text. And add another search field to be used by the visitor.

5

I have a simple fix for this. Here’s what I did.

I have a heading at the top of my search results page with a class of “Search Heading”. The text simply says “Search results”.

I added custom code in the head of my search results page:

<script>
  document.addEventListener('DOMContentLoaded', function(){
    var urlParams = new URLSearchParams(window.location.search);
    var searchQuery = urlParams.get('query');
    var searchHeading = document.querySelector('.search-heading');
    searchHeading.innerHTML = 'Search results for &lsquo;' + searchQuery + '&rsquo;';
  });
</script>

This finds the text after ?query= in the URL and inserts it into the heading as “Search results for ‘search query’.” It seems to have good browser support, but it does fallback to just saying “Search results” if unsupported.

10 Likes
6

So clean! Thanks Garrett

7

@garr_tt - super awesome! Thanks for the snippet and solution!

8

Hey, Garrett! The code worked flawlessly when there was no other custom code on the search results page. But after adding custom code to the before body tag for a slider element, the script doesn’t work :no_mouth:

Need help to fix that. Please.