You're not eligible to view this page. Click here to access this course or Log In if you've purchased it already

Search bar that DISPLAYS Results into another page

Working with wix storage

This code will show you how to create a search bar that filters and display the results into another page.

The first thing we need is two pages:

- search bar page

- page with results

For this example we will be using a normal search bar into the "search bar page" and a button for redirecting and start the search.

Add a text input and a Button from the menu and change their placeholder and label according to your needs.

GO

Once you have added the text input and the button, then change the text input ID to #searchBar and the Button ID to #searchButton.

Also, remember to activate the onClick event for the #searchButton

Now paste the code below.

This is how your complete code should look like:

import {local} from 'wix-storage';
import wixLocation from 'wix-location';

$w.onReady(function () {
});

export function searchButton_click() {
    let searchBarWord = $w("#searchBar").value;
    local.setItem("WordToSearch", searchBarWord); 
    wixLocation.to(`/resultspage`);
}

Your code should look like the picture below

Wix Storage Search Bar..png

*** VERY IMPORTANT ***

In the picture above in line 14 we redirect the user to a page we created called Results Page where its URL ends with /resultspage

In order to find the exact URL of your page go into the page settings and click on SEO (Google)

Check pictute below for reference

SEO wix URL.png

Now let's have a look at the second page we need to build (Page with Results)

Inside these page we need the following things:

- a search bar

- a button

- a repeater (this must be connected to a Collection through a dataset)

Once you have added the text input, the button and the Repeater then change the text input ID to #searchBar , the Button ID to #searchButton  and the Repeater ID to #repeater

Now paste the code below.

This is how your complete code should look like:

import {local} from 'wix-storage';

import wixData from 'wix-data';


 

$w.onReady(function () {

    var word = local.getItem("WordToSearch");

    $w("#searchBar").value = word;

    $w("#searchBar").placeholder = word;

    //$w('#dataset1').onReady(function () {

        findResults();

   

});


 

function findResults() {

    wixData.query('YourDatabaseID')

     .contains('yourFieldKey', $w("#searchBar").value)

          .find()

         .then(res => {

          //$w('#repeater1').data = res.items;

    });

}