Enhance User Experience by Filtering Repeaters without Buttons in Wix

Creating a seamless and efficient user experience is crucial for any website. In Wix, you can streamline the process of filtering repeater content without relying on Search or Reset buttons. This guide will walk you through how to implement text input and dropdown filtering to make your site more intuitive and user-friendly.

Filtering with a Text Input

A text input filter allows users to type in a query and automatically see results that match their input in real time. Here's how you can set it up:

1. Add a Text Input and Repeater to Your Page: - Drag and drop a text input element onto your page and give it the ID searchInput. - Add a repeater element to display your filtered results.
   

2. Set Up the Backend Code: - Open the page code editor and paste the following code:

import wixData from 'wix-data';

$w.onReady(function () {
    $w('#searchInput').onInput(() => {
        search();
    });
});

function search() {
    wixData.query("Books")
        .contains("title", $w('#searchInput').value)
        .or(wixData.query("Books").contains("author", $w('#searchInput').value))
        .find()
        .then(results => {
            $w('#booksRepeater').data = results.items;
        });
}

Explanation:

• The onReady function ensures that the code runs when the page is fully loaded.

• The onInput event listener triggers the search function each time the user types in the text input.

• The search function queries the "Properties" database for records where the title or agent name contains the input value and updates the repeater data with the results.

Filtering with a Dropdown Input

Dropdown filtering can be useful when you want users to select from predefined options. Here's how to implement it:

1. Add a Dropdown and Repeater to Your Page: - Drag and drop a dropdown element onto your page. - Add a repeater element to display your filtered results.
   

2. Set Up the Backend Code: - Open the page code editor and paste the following code:

import wixData from 'wix-data';

$w.onReady(function () {
    $w('#dropdown1').onChange(() => {
        search();
    });
});

function search() {
    wixData.query("Books")
        .contains("genre", $w('#dropdown1').value)
        .or(wixData.query("Books").contains("publisher", $w('#dropdown1').value))
        .find()
        .then(results => {
            $w('#booksRepeater').data = results.items;
        });
}

Explanation:

• Like the text input, the onReady function initializes the code when the page loads.

• The onChange event listener triggers the search function whenever the user selects a different option in the dropdown.

• The search function queries the "Books" database based on the dropdown value and updates the repeater with the matching results.

Important Considerations

• Element and Database Names: Ensure that the element IDs (#searchInput, #dropdown1, and #booksRepeater) match the IDs you have assigned to your elements in the Wix editor.

• Database and Field Keys: Verify that your database name ("Books") and the field keys ("title", "author", "genre", and "publisher") are correct and correspond to your dataset.

By following these steps, you can enhance your Wix site with dynamic, real-time filtering capabilities, offering a more efficient and user-friendly experience. There is no more need for extra search or reset buttons—just a smooth and straightforward filtering process.