Saving all the inputs from the search bar

Hi people!

I have a search bar and a button to search on my page. I would like to know how to save user inputs, to have a historical about what the users try to find on the search page. I have 2 datas sets, one to show the results from the search (it works) and another one to save what the people are searching (doesn’t work).

Any help would be greatly appreciated! Thank’s!

1 Like

You need to write onclick event while user clicks on search button

I am trying to achieve this too. The code does work, but only for logged-in users. I want it to work for logged-out users too.

May I see the code please.

Ok, I think I will keep it this way. - sorry

Thanks

Hi @gabidvsala , @arthurvalatin and @Er.Muthu K :raised_hand_with_fingers_splayed:

You can do this by using wix data API, I do not recommend using the dataset to save any changes automatically.

If you want to save the search locally (search history) too, I’ll add this functionality into my code.

First, import local from wix-storage and wix-data modules.

import wixData from 'wix-data';
import {local} from 'wix-storage';

Define a variable as an array to save the search locally.

let searches = [];

Add en event handler on the search button to work whenever it is clicked.

$w('#searchButton').onClick((event) => {
    // Define a variable for the search value
    let search = $w('#searchInput').value;
    
    // Check if the search is not empty before saving..
    if (search !== '') {
        // Check if the search is saved in the array.
        let items = searches.filter(term => {
            if (term === search) {
                return term;
            }
        })
        
        if (items.length > 0) {
            // Ignore this search term (already saved locally)            
        } else {
            // This search isn't saved locally, so save it.
            // First, add it to the array.
            searches.push(search);
            
            // Then save it locally.
            local.setItem('searches', JSON.stringify(searches));
        }
        
        /* Now save the search to the database, regardless
        of if it's saved locally or no */
        wixData.insert('collection', {searchBar: search})
    }
})

@Arthur Valatin , if your searches are being saved only when users are logged in, you probably have your collection’s permissions set to ‘Member Generated Content’, which allows only members to submit data to the database, use custom permissions and set the “Write” permission to “Anyone”.

Hope this helps guys.
Ahmad

Wow! Thanks! You are amazing!

Hi Ahmad, thanks a lot.

I used this code and in ‘collection’ I used the collection’s ID.
Where can I find ‘searches’? I have to do another database with this name?
Sorry for the question but there’s someone that I didn’t get.

@gabidvsala ‘searches’ is an array used to save the searches locally on the user’s browser cache, it’s like cookies.

Also, when inserting the search inside the collection, I did insert it in a database where all the searches are stored, so yeah, ‘collection’ is just a keyword I used to refer to the collection ID that you should use to store the searches.

If you have any questions feel free to ask.

You’re welcome :wink:

@ahmadnasriya ok, thank’s! I don’t know why but this is not working for me.

Sure, this is all I have:

import wixData from “wix-data” ;
import {local} from ‘wix-storage’ ;

let x;
export function button1_click () {
if ( x ){
clearTimeout( x );
x = undefined;
}
x = setTimeout(() => {
$w( “#database” ).setFilter(wixData.filter().contains( “col1” , $w( ‘#searchbar’ ).value)
.or(wixData.filter().contains( “col2” , $w( ‘#searchbar’ ).value)
.or(wixData.filter().contains( “col3” , ($w( ‘#searchbar’ ).value))))) .then(() => {
count();
})
}, 200 );

(wixData.query( "database" ).contains( "col1" , $w( "#searchbar" ).value) 
    .or(wixData.query( "database" ).contains( "col2" , $w( "#searchbar" ).value) 
        .or(wixData.query( "database" ).contains( "col3" , $w( "#searchbar" ).value)))) 
.find() 
.then(res => {    
  $w( "#table1" ).rows = res.items;  
  $w( "#table1" ).expand(); 
}); 

}

function count() {

let total = $w( ‘#database’ ).getTotalCount();
if (total > 1 ) {
$w( ‘#text25’ ).text = ${total} results were found.;
$w( ‘#text25’ ).show();
}

if (total === 1 ) {
$w( ‘#text25’ ).text = ${total} results was found.;
$w( ‘#text25’ ).show();
}

if (total === 0 ){
$w( ‘#text25’ ).text = “No result found.” ;
$w( ‘#text25’ ).show();
}
}

let searches = ;
$w( ‘#button1’ ).onClick((event) => {
let search = $w( ‘#searchbar’ ).value;
if (search !== ‘’ ) {
let items = searches.filter(term => {
if (term === search) {
return term;
}
})

if (items.length > 0 ) {
} else {
searches.push(search);
local.setItem( ‘searches’ , JSON.stringify(searches));
}
wixData.insert( ‘backupsearchDB’ , search)
}
})

@gabidvsala Can you give me a link to your published page so I can inspect further?

@ahmadnasriya Sure, I can share the page with you (and I’m tring to do with two different websites, one is premium and another one is plan free).

But before that, let me share the codes that I used.

Case 1:
let toInsert = {
‘searchbar’ : $w( ‘#searchbar’ ).value
}
console.log(toInsert)
wixData.insert( ’ backupsearchDB ’ , toInsert)
.then((results) => {
})
. catch ((err) => {
let errorMsg = err;
})

Case 2:
$w( ‘#button1’ ).onClick((event) => {
let toInsert = {
‘searchbar’ : $w( ‘#searchbar’ ).value
}
console.log(toInsert)
wixData.insert( ’ backupsearchDB ’ , toInsert)
.then((results) => {
})
. catch ((err) => {
let errorMsg = err;
})
})

Case 3 : (that’s what you show me on this forum)
let searches = [];
$w( ‘#button1’ ).onClick((event) => {
let search = $w( ‘#searchbar’ ).value;
if (search !== ‘’ ) {
let items = searches.filter(term => {
if (term === search) {
return term;
}
})
if (items.length > 0 ) {
} else {
searches.push(search);
local.setItem( ‘searches’ , JSON.stringify(searches));
}
wixData.insert( ‘backupsearchDB’ , ‘searchbar’ )
}
})

The complete code that I’m using to the research page I shared in this forum to answer a comment.

Oh! Sorry @gabidvsala , it was my bad, I’ve corrected the typo in my answer and highlighted it in orange.

wixData.insert('collection', {searchBar: search})

Instead of…

wixData.insert('collection', search)

Where searchBar is the field ID in the database.
Sorry for the typo again :blush: Hope it work this time.