Search

Ask the community
1

Hello, @wix58648 I need help to create a search bar in
one of my pages, and that it brings me the information
related to the search field
what I want is to enter a number in the field “Documento de identida”
and click on
the button “Consultar” to make the query.

https://yerlilopera14.wixsite.com/gestores

985×202 7.62 KB

2

Normaly the same rules for you, like here in this post…
https://www.wix.com/velo/forum/site-page-design/disable-webp-image-download

…but let’s not be so strict…

So what do you have?

  1. You have an - - - > INPUT-ELEMENT, where you will type in some value(s).

  2. You have a BUTTON – > which will activate the SUBMISSION/SEARCH-FUNCTION.

  3. What else do you need to get your FUNCTIONALITY?

YES! —> You need CODE! (code which is normaly written by code-masters as a payed servey/service).

Well, as i already mentioned, let’s not be so strict with the NEWBIES (–> who are just looking for codes and not for learning lessons).

If you want to filter something → that means you surely also will have a database!
And inside your database, you will have some already prepared/setted-up db-fields, filled with content/values/items, right ? Yes, RIGHT!

What is the most simple ways to filter a databse using code?

Well if i am honest there are more then one simple ways of how to filter a DATABASE, but let’s take this one as example…

EXAMPLE:

import wixData from 'wix-data';

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

function myFilterFunction() {console.log("My function running...")
    wixData.query('collection')
    .eq('number', '0000044')
    .find()
    .then((res)=>{console.log("RESULTS: ", res);
        if(res.items.length>0) {
            console.log("RESULT-length", res.items.length);
        } else {console.log("No data found!");}
    }).catch((err)=> {console.log("getPaymentHistory err", err);});
}

What do we have here?

We have here a filtering function, which searches for a specific value in a specific DB-FIELD, of specific COLLECTION.

Exactly what you need, dont’t you ? :roll_eyes:

But of course you still will have to do some changes on this example, to make your wished functionalities work.

Which would be the mentioned CODE-changes?

Well, first of all you surely want the function running only if you click the SUBMISSION/SERACH-BUTTON, right? → YES! RIGHT!

So let’s do some changes on our code…

import wixData from 'wix-data';

$w.onReady(function(){
    $w('#mySerachButtonIdhere').onClick(()=>{
        myFilterFunction();
    });
});

function myFilterFunction() {console.log("My function running...")
    wixData.query('collection')
    .eq('number', '0000044')
    .find()
    .then((res)=>{console.log("RESULTS: ", res);
        if(res.items.length>0) {
            console.log("RESULT-length", res.items.length);
        } else {console.log("No data found!");}
    }).catch((err)=> {console.log("getPaymentHistory err", err);});
}

And surely you do not want to search the value → ‘0000044’…
…in the → number ← DATABASE-FIELD…
…of the → collection ← COLLECTION, right? → YES! RIGHT!

You want your VALUE to be → DYNAMIC loaded by the INPUT! By YOUR input!

import wixData from 'wix-data';

$w.onReady(function(){
    $w('#mySerachButtonIdhere').onClick(()=>{
        let myValue = $w('#myInputElementIdhere').value
        let myDB_FIELD = "ENTER HERE YOUR WISHED DB-FIELD"
        let myCollection = "ENTER HERE YOUR WISHED COLLECTION/DATABASE"
        myFilterFunction(myCollection, myDB_FIELD, myValue);
    });
});

function myFilterFunction(myCollection, myDB_FIELD, myValue) {console.log("My function running...")
    wixData.query(myCollection)
    .eq(myDB_FIELD, 'myValue')
    .find()
    .then((res)=>{console.log("RESULTS: ", res);
        if(res.items.length>0) {
            console.log("RESULT-length", res.items.length);
        } else {console.log("No data found!");}
    }).catch((err)=> {console.log("getPaymentHistory err", err);});
}

Et, viola! Tu a créé un filtre! :stuck_out_tongue_winking_eye:

Oh, by the way! You will find all results in your CONSOLE!
How to use the CONSOLE?

You will find your CONSOLE either in your Wix-Editor when running your CODE in the PREVIEW-MODE, or by pressing the F-12-Button on your Keyboard inside your google-chrome or microsoft-edge-BROWSER!

Ok, now try to reproduce all that shit xD. Good luck! And do not forget to like it, if you realy liked it :wink:

3

Hello. @wix58648 Thank you very much for the information it is clearer to me.
Now, I have a question, the database I do not have. I would have to create a new one and where,
or am I supposed to use the one I have with you.

4

@yerli-lopera14
Just create a new DATABASE / COLLECTION in your Wix-Content-Manager of your Wix-Editor.

To be able to see all the programming control-panel, you will first have to activate the DEV-MODE (developer-mode) in your Wix-Editor.

After you have done this you just navigate to CONTENT-MANAGER where you should find all your COLLECTIONS / DATABASES (DBs).

Create your own DATABASE and give it a plausible NAME/ID.
Inside your DATABASE → create a new FIELD or use the already predefined → “title” ← field to store all your DATA.

Replace all given IDs (marked in RED) with your own ones…

  1. ID of your Input-Element
  2. ID of your DB-Field
  3. ID of your Collection / database
let myValue = $w(#'myInputElementIDhere').value;
let myDB_FIELD = "ENTER HERE YOUR WISHED DB-FIELD";
let myCollection = "ENTER HERE YOUR WISHED COLLECTION/DATABASE";
5

Hello, @wix58648 I have followed the instructions and when I do the search I get that it does not find the data.
What else can I do?

1363×277 11.4 KB

6

What you can do?

  1. Showing your current working (not working) code.
  2. Showing the structure of your DATABASE and also the DB-ID.
  3. Showing your setup (which elements are used and why) ?

As i can see you do not get any ERRORS → thats already good.
But you also do not get any results → not good.

Check your DB-Entries.
Check if you used the right DB-FIELD-ID.
But since anybody knows which code you are using, anybody can tell anything about your issue.

When you provide your code → please do it in a → CODE-BLOCK (no picture).

7

Hi @wix58648 this is the code.
I would not know what to put in the DB-FIELD-ID

import wixData from ‘wix-data’ ;

$w . onReady ( function (){
$w ( ‘#button1’ ). onClick (()=>{
let myValue = $w ( ‘Document’ )
let myDB_FIELD = “Contact042”
let myCollection = “contact042”
myFilterFunction ( myCollection , myDB_FIELD , myValue );
});
});

function myFilterFunction ( myCollection , myDB_FIELD , myValue ) { console . log ( “My function running…” )
wixData . query ( myCollection )
. eq ( myDB_FIELD , ‘myValue’ )
. find ()
. then (( res )=>{ console . log ( "RESULTS: " , res );
if ( res . items . length > 0 ) {
console . log ( “RESULT-length” , res . items . length );
} else { console . log ( “No data found!” );}
}). catch (( err )=> { console . log ( “getPaymentHistory err” , err );});
}

8

I have also dealt with this

import wixData from ‘wix-data’ ;

$w . onReady ( function (){
$w ( ‘#button1’ ). onClick (()=>{
let myValue = $w ( ‘#button1’ )
let myDB_FIELD = “Document”
let myCollection = “contact042”
myFilterFunction ( myCollection , myDB_FIELD , myValue );
});
});

function myFilterFunction ( myCollection , myDB_FIELD , myValue ) { console . log ( “My function running…” )
wixData . query ( myCollection )
. eq ( myDB_FIELD , ‘myValue’ )
. find ()
. then (( res )=>{ console . log ( "RESULTS: " , res );
if ( res . items . length > 0 ) {
console . log ( “RESULT-length” , res . items . length );
} else { console . log ( “No data found!” );}
}). catch (( err )=> { console . log ( “getPaymentHistory err” , err );});
}

9

Can you please make a screenshot of your DB-NAME/DB-ID and also of your DB-structure itself?

I will check why its not working for you.

I need to know the name and ID of your collection and like already mentioned → the INSIDE of your DATABASE (SCTRUCTURE), including DB-FIELD-ID.

Your button is also called → “button1” ?
Or to be more precise, the ID of your button is → “button1”?
Ok, the last question i can answer by myself, → YES with your button is everything ok.

But WAIT !!! Look at my provided code…

let myValue = $w('#myInputElementIdhere').value

…and now compare it with your one…

let myValue = $w('Document')

…what do you get in console for —> DOCUMENT…?

let myValue = $w('Document'); console.log("DOCUMENT: ", myValue);

…replace your related codeline with this one and take a look onto CONSOLE.

…do the same for…

let myValue = $w('#button1'); <--- surely wrong !

…replacing with …

let myValue = $w('#button1'); console.log("DOCUMENT: ", myValue);

Surely you will get wrong VALUES.

What you want to do instead is to get the → NUMERORE DE IDENTIDAD ←
Which you type into an INPUT-FIELD.

This INPUT-FIELD has an ID - → let it be → “myInput”

Your code for your INPUT-FIELD would be…

$w('#myInputField').value

Your CODE:

import wixData from 'wix-data';

$w.onReady(function(){
    $w('#button1').onClick(()=>{
        $w('#myInputField').value; console.log("DOCUMENT: ", myValue);
        let myDB_FIELD = "Document" //<-this should be the ID of the FIELD inside your DB
        let myCollection = "contact042" //<-- this should be the ID of your COLLECTION/DB
        myFilterFunction(myCollection, myDB_FIELD, myValue);
    });
});

function myFilterFunction(myCollection, myDB_FIELD, myValue) {
    console.log("My function running...")
    wixData.query(myCollection)
    .eq(myDB_FIELD, myValue)
    .find()
    .then((res)=>{console.log("RESULTS: ", res);
        if(res.items.length>0) {console.log("Data found!");
            console.log("RESULT-length", res.items.length);
        } else {console.log("No data found!");}
    }).catch((err)=> {console.log("getPaymentHistory err", err);});
}

Green → corrected → ok!
Red → Check again!

10

Issue resolved?

11

Sorry. Now I am more confused. I have copied the code provided and I get many errors, I no longer know what to change.

1366×541 48.8 KB

12

716×598 18.3 KB

1288×577 24.9 KB

13

Ok, before you CRASH your page/site totaly, i can take a look onto your issue (if you trust me) you can send me an invitation. My e-mail can be found in my profile.

This would be the fastest way to solve it.

Yes you have made a lot of mistakes. → Did you copy and paste my code?

Surly not :grin:…
…where are the missing braces/brakets?

$w('#myInputField').value

And there are a lot more of SYNTAX-ERRORS.

Ok, your COLLECTION-ID is —> “contact042”

But the DB-FIELD-ID is still unclear…
let myDB_FIELD= “Document” ← Which FIELD is this in your DB?

Or the better question is:–> Which one of the following FIELDS you want to do the search/filtering ? And what is it’s → ID ???

3478×120 49.7 KB

I assume it will be the following DB-FIELD…


Click with your right mouse-button on it and take a look for the FIELD-ID.
This will be your → “myDB_FIELD”. → (is the ID → “Document”, or “document”, or something else?) Show a screenshot!

Also pay attention, that your N°Documento-Field is of TYPE → NUMBER !!!

  1. Copy and paste the following code (which was given in my last posts)…

954×926 41.4 KB

Onto your page and replace your current (NOT) working code.

  1. Replace → “myCollection” → with → “contact042”
  2. Replace → “myInputField” → with → the ID of your INPUT-FIELD. (already OK)


4) Replace → “button1” → with → the ID of your button.
5) Do not touch anything is this code-part…

function myFilterFunction(myCollection, myDB_FIELD, myValue) {
    console.log("My function running...")
    wixData.query(myCollection)
    .eq(myDB_FIELD, myValue)
    .find()
    .then((res)=>{console.log("RESULTS: ", res);
        if(res.items.length>0) {console.log("Data found!");
            console.log("RESULT-length", res.items.length);
        } else {console.log("No data found!");}
    }).catch((err)=> {console.log("getPaymentHistory err", err);});
}

After you have managed everything, click your button to start your search/filter-function.

Open the → CONSOLE (to be found on very bottom in the Wix-Editor’s PREVIEW-MODE) and take a look onto RESULTS?

Do you get any RESULTS? Or do you get some ERRORS?
Make a screenshot.

I am sure, now you will be able to solve your issue by your own.

14

At the end your CODE should look like…

import wixData from 'wix-data';

$w.onReady(function(){
    $w('#button1').onClick(()=>{console.log("Button clicked!");
        $w('#myInputField').value; console.log("Input-Value: ", myValue);
        let myDB_FIELD = "Document"; console.log("DB-Field: ", myDB_FIELD);
        let myCollection = "contact042"; console.log("Collection: ", myCollection);
        mySearchFunction(myCollection, myDB_FIELD, myValue);
    });
});

function mySearchFunction(myCollection, myDB_FIELD, myValue) {
    console.log("My function running...")
    wixData.query(myCollection)
    .eq(myDB_FIELD, myValue)
    .find()
    .then((res)=>{console.log("RESULTS: ", res);
        if(res.items.length>0) {console.log("Data found!");
            console.log("RESULT-length", res.items.length);
        } else {console.log("No data found!");}
    }).catch((err)=> {console.log("getPaymentHistory err", err);});
}
  1. ‘#button1’ —> checked! (o.k.)
  2. ‘#myInputField’ —> checked! (o.k.)
  3. “contact042” —> checked! (o.k.)
  4. “Document” —> to be checked! (???)