# Search

**URL:** <https://forum.wixstudio.com/t/search/3813>\
**Category:** Ask the community\
**Tags:** design\
**Created:** [November 16, 2021, 5:33pm UTC](https://forum.wixstudio.com/t/search/3813 "2021-11-16T17:33:25Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![yerli-lopera14](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/yerli-lopera14/32/30890_2.png) [@yerli-lopera14](https://forum.wixstudio.com/u/yerli-lopera14)\
**Post date:** [November 16, 2021, 5:33pm UTC](https://forum.wixstudio.com/t/search/3813/1 "2021-11-16T17:33:25Z")

</div>

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](https://yerlilopera14.wixsite.com/gestores)

 ![](https://us1.discourse-cdn.com/wix/original/3X/f/1/f1151a6100981d0bc9e7e473cffeb5b2a26b159c.png)

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [November 17, 2021, 9:32am UTC](https://forum.wixstudio.com/t/search/3813/2 "2021-11-17T09:32:32Z")

</div>

Normaly the same rules for you, like here in this post…  
[https://www.wix.com/velo/forum/site-page-design/disable-webp-image-download](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:**

```javascript
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 ? 🙄

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…

```javascript
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!

```javascript
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! 😜

## 

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 😉

---

<div class="post-metadata">

**Author:** ![yerli-lopera14](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/yerli-lopera14/32/30890_2.png) [@yerli-lopera14](https://forum.wixstudio.com/u/yerli-lopera14)\
**Post date:** [November 18, 2021, 5:09pm UTC](https://forum.wixstudio.com/t/search/3813/3 "2021-11-18T17:09:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [November 19, 2021, 5:25pm UTC](https://forum.wixstudio.com/t/search/3813/4 "2021-11-19T17:25:55Z")

</div>

@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

```javascript
let myValue = $w(#'myInputElementIDhere').value;
let myDB_FIELD = "ENTER HERE YOUR WISHED DB-FIELD";
let myCollection = "ENTER HERE YOUR WISHED COLLECTION/DATABASE";

```

---

<div class="post-metadata">

**Author:** ![yerli-lopera14](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/yerli-lopera14/32/30890_2.png) [@yerli-lopera14](https://forum.wixstudio.com/u/yerli-lopera14)\
**Post date:** [November 25, 2021, 2:27pm UTC](https://forum.wixstudio.com/t/search/3813/5 "2021-11-25T14:27:57Z")

</div>

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?

 ![](https://us1.discourse-cdn.com/wix/original/3X/f/a/fa3b693f2d1e305742be2cfaa55265ad393c05dd.png)

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [November 27, 2021, 11:11pm UTC](https://forum.wixstudio.com/t/search/3813/6 "2021-11-27T23:11:45Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![yerli-lopera14](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/yerli-lopera14/32/30890_2.png) [@yerli-lopera14](https://forum.wixstudio.com/u/yerli-lopera14)\
**Post date:** [November 29, 2021, 9:46pm UTC](https://forum.wixstudio.com/t/search/3813/7 "2021-11-29T21:46:44Z")

</div>

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 );});  
}

---

<div class="post-metadata">

**Author:** ![yerli-lopera14](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/yerli-lopera14/32/30890_2.png) [@yerli-lopera14](https://forum.wixstudio.com/u/yerli-lopera14)\
**Post date:** [November 29, 2021, 9:52pm UTC](https://forum.wixstudio.com/t/search/3813/8 "2021-11-29T21:52:01Z")

</div>

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 );});  
}

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [November 29, 2021, 11:46pm UTC](https://forum.wixstudio.com/t/search/3813/9 "2021-11-29T23:46:39Z")

</div>

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…

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

```

…and now compare it with your one…

```javascript
let myValue = $w('Document')

```

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

```javascript
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…

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

```

…replacing with …

```javascript
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”

![](https://us1.discourse-cdn.com/wix/original/3X/4/f/4fe9ca5c3ecd428302230f75b384b7b24670d7bb.png)

Your code for your INPUT-FIELD would be…

```javascript
$w('#myInputField').value

```

Your CODE:

```javascript
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!

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [December 1, 2021, 10:14pm UTC](https://forum.wixstudio.com/t/search/3813/10 "2021-12-01T22:14:34Z")

</div>

Issue resolved?

---

<div class="post-metadata">

**Author:** ![yerli-lopera14](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/yerli-lopera14/32/30890_2.png) [@yerli-lopera14](https://forum.wixstudio.com/u/yerli-lopera14)\
**Post date:** [December 1, 2021, 10:50pm UTC](https://forum.wixstudio.com/t/search/3813/11 "2021-12-01T22:50:22Z")

</div>

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

 ![](https://us1.discourse-cdn.com/wix/original/3X/4/3/435132512ccc2516f8e5aae84a9c7206f13ff391.png)

---

<div class="post-metadata">

**Author:** ![yerli-lopera14](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/yerli-lopera14/32/30890_2.png) [@yerli-lopera14](https://forum.wixstudio.com/u/yerli-lopera14)\
**Post date:** [December 1, 2021, 10:56pm UTC](https://forum.wixstudio.com/t/search/3813/12 "2021-12-01T22:56:56Z")

</div>

![](https://us1.discourse-cdn.com/wix/original/3X/4/8/4873a84c7dd2c7440b8b6615b368016f8c7cd18c.png)

 ![](https://us1.discourse-cdn.com/wix/original/3X/2/6/26fc22698a0b39384b9e90c3cfccc8320d5a12d9.png)

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [December 1, 2021, 11:20pm UTC](https://forum.wixstudio.com/t/search/3813/13 "2021-12-01T23:20:10Z")

</div>

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 😁…  
…where are the missing braces/brakets?

```javascript
$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 ???

 ![](https://us1.discourse-cdn.com/wix/original/3X/7/6/760afa6f8cef11e1d24b26e5fb021be753c535bb.png)

I assume it will be the following DB-FIELD…

![](https://us1.discourse-cdn.com/wix/original/3X/d/8/d8401e6f8f85f275faabd85e86967d2cb031886b.png)  
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)…

 ![](https://us1.discourse-cdn.com/wix/original/3X/0/f/0f40eff98e23d1b9a85db77ef06d011b4a6d8b8c.png)  
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)

![](https://us1.discourse-cdn.com/wix/original/3X/8/f/8f98cbef82725205773101710a5807c8f5446f13.png)  
4) Replace → “button1” → with → the ID of your button.  
5) Do not touch anything is this code-part…

```javascript
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.

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [December 2, 2021, 1:07am UTC](https://forum.wixstudio.com/t/search/3813/14 "2021-12-02T01:07:56Z")

</div>

At the end your CODE should look like…

```javascript
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! (???)