Including the searchValue in the URL

Ask the community
,
1

Hello!
I have a search bar to search my dataset. Is it possible to include the searchValue in the url? Like if I searched “bird” then the url would have “bird” in it.
~Thanks~
Arthur
(I’ve kind of got 2 ways to let people search- clicking the search button & pressing Enter)

import wixData from 'wix-data';

export function input1_keyPress(event) {
 if(event.key ==="Enter") {
        console.log("Enter has been pressed")
 let searchValue = $w("#input1").value;
 let filter = wixData.filter()
        .contains('name',searchValue)
        .eq('stat','Published')
        .or(wixData.filter().contains('japanese',searchValue))
        .eq('stat','Published')
        .or(wixData.filter().contains('title',searchValue))
        .eq('stat','Published')
        $w("#dataset1").setFilter(filter);
    }
}

$w.onReady( function() {

})
export function button44_click(event) {
let dropdown2 = $w("#dropdown2").value;
let dropdown1 = $w("#dropdown3").value;
let dropdown = $w("#dropdown4").value;
let searchValue = $w("#input1").value;
let filter = wixData.filter()
    .contains('name', searchValue)
    .eq('stat', 'Published')
 
    .or(wixData.filter().contains('japanese',searchValue)
    .eq('stat','Published')
 
    .or(wixData.filter().contains('title',searchValue))
    .eq('stat','Published')
 
    )
    $w("#dataset1").setFilter(filter);
}
2

Hi Arthur,

If you want to add the searchValue to the URL you could try using QueryParams from the wix-location API.

QueryParams has a function called Add() which will add query parameters to the current page’s URL.

Hope this helps!

Dara | Corvid Team

3

Hello! Thanks for your answer. I am a code novice. I have read the QueryParams page but don’t fully understand it or know how to code it. Could you give me some more help?
~Thanks~
Arthur

4

Hi Arthur :raised_hand_with_fingers_splayed:

Going with Dara’s post, you can use QueryParams to set the search term on the URL, for example:

$w('#searchButton').onClick((event) => {
    let value = $w('#seachBar').value;
    search(value).then(() => {
        wixLocation.queryparams.add({search: value})
    })
})

And the URL will be something like this:

www.website.com/catalog?search=word

Hope that helped~!
Ahmad

5

When replying to people, please reply to their answers instead of putting the reply as a new answer, it’ll make the thread much easier to read and more comfortable to the eye.

6

Hello! I tried your code but got an error. I am doing my best.

import wixData from 'wix-data';export function button1_click(event) {
 let value = $w("#input1").value;
    search(value).then(() => {
        wixLocation.queryparams.add({search: value})
    })
let searchValue = $w("#input1").value; let filter = wixData.filter()
    .contains('name',searchValue)
    .eq('stat','Published')
    .or(wixData.filter().contains('title',searchValue))
    .eq('stat','Published')
    $w("#dataset1").setFilter(filter); 
}

I got the error on the 4th & 5th line. The error messages said “search” not defined ＆ “wixLocation” not defined. Could you help me?
I tried my best.
~Thanks~
Arthur

7

Of course search() is not defined, it’s because the code above is just an example and represent whatever you’re trying to do, either searching or filtering.

You can’t just copy the code and paste it into your website and call it a day, you need to adapt it to your code.

You can’t also expect absolute answers to your questions, the forum is meant to help people code, not to code for them, and as far as I can tell you didn’t take the course that I sent you weeks ago, put some time and efforts into learning, it’s an investment to code easier in the future.

Anyway, here’s the solution.

function button1_click(event) {

    let value = $w("#input1").value;
    search(value).then(() => {
        wixLocation.queryparams.add({search: value})
    })

let searchValue = $w("#input1").value;
let filter = wixData.filter()
    .contains('name',searchValue)
    .eq('stat','Published')
    .or(wixData.filter()
        .contains('title',searchValue)
        .eq('stat','Published')
    )

    $w("#dataset1").setFilter(filter).then(()=> {
        wixLocation.queryparams.remove(['search'])
        wixLocation.queryparams.add({search: searchValue})
    })

}
8

Sorry. I will only ask for help (not for code) from next time.
Arthur

9

Hello. Thanks for your code! I added the import wixLocation at the top of the code. I still got an error. Please don’t give me the code. Please just tell me what I need to do (0 code). Anyway, here is my code.

import wixData from 'wix-data';
import wixLocation from 'wix-location';
export function button1_click(event) {
 let value = $w("#input1").value;
    search(value).then(() => {
     wixLocation.quaryparams.add({search: value})
    })
 let searchValue = $w("#input1").value;
 let filter = wixData.filter()
    .contains('name',searchValue)
    .eq('stat','Published')
    .or(wixData.filter().contains('title',searchValue))
    .eq('stat','Published')
    $w("#dataset1").setFilter(filter).then(() => {
     wixLocation.quaryparams.remove([search])
     wixLocation.quaryparams.add({search: searchValue})
    })
 
}

I got the error on the 5 the line & 15 line of code. Both on the search bit. Both of the error messages said “search” not defined. I think I need to declare search. Please don’t give me the code. Please just tell me what I need to fix or add.
~Thanks~
Arthur

10

As I said in my previous reply, you don’t have a defined function called search() , delete that call and move its body outside the function, the statements that add the query must be replaced.

As for line 15, sorry my bad, I forgot to include the single quotations:

wixLocation.quaryparams.remove(['search'])