Saved Search

Save search parameters on a site for later use.

Intermediate Last updated: 29 Apr 2025

Open Example Preview

About

This example demonstrates how to use query parameters to save and retrieve user input values during a session. The current search values are saved as query parameters in the URL. When a visitor refreshes or navigates back to the site page, their previous search criteria are automatically populated in the user input fields. The site uses a collection, whose data is filtered by the search criteria and then displayed in a repeater.

APIs

• $w.TextInput API
• $w.Dropdown API
• $w.Repeater API
• $w.Button API
• Location
• Data

How we built it

We added the following to our site:

Page Elements

• A repeater for displaying content from a collection.
• A text input element to enter text for filtering content.
• A dropdown element to select a continent for filtering content.

Collections

• Continents: A collection of continents to filter by.
• Articles: A collection of travel tips and information for a range of countries.

Frontend Code

Articles

The code in this file initializes the page elements, listens for events, retrieves the latest user input values, and filters the collection data to display.

In this file, we:

• Define variables to keep track of the user input values.
• Define event handlers for the following actions:
  • When the text input element receives input.
  • When the dropdown element value changes.
• Query all the continents from the Continents collection and set the options for the dropdown element.
• Retrieve the last user input values from the URL query parameters, if any, and prepopulate the text input and dropdown elements with those values or default options.
• Filter the Articles collection and display the content matching the search criteria in the repeater, or show an error message if no results are found.
• Update the URL query parameters to reflect the latest user input values after displaying the filtered results.

Code Snippets

Get Help

Join the community

Join the Wix Studio community on Discord, where experienced developers and fellow creators come together to share tips, troubleshoot issues, and collaborate.

Hire a developer

Building a coded solution on your own can be challenging. Let an experienced Wix developer build it for you, so you can keep working on your site or business. Visit the Wix Marketplace to find a trusted developer.