How to create search box & display result connected database

Hi, I just want to create a box (where any user can input the ‘registration no.’ and check the result which display whether the ‘registration no.’ is valid or no
t valid.
When user press check button, it will display the registration no. & the details which i have done in database.
That simple. But i have tried thousand times but failed. Please help me.
My site: club40my.wixsite.com/home
Please check for me:

Hi,

Take a look at the article How to Use Code to Let Your Users Search a Collection to see how to do what you need.

Have fun,

Yisrael

Hi Yisrael,
I have tried but still failed. When i preview & key in the number in the input field, it doesnt come out anything in the table. I have screenshot for you:


This is my full code:
import wixData from ‘wix-data’;

export function button1_click(event, $w) {
// Runs a query on the “Members” collection
wixData.query(‘Member’)
// Query the collection for any items whose “Name” field contains
// the value the user entered in the input element
.contains(‘No. Pendaftaran’, $w(‘#input1’).value)
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w(‘#table1’).rows = res.items;
});
}
$w.onReady(function () {
$w(“#table1”).columns = [
{
“id”: “col1”, // ID of the column for code purposes
// The field key in the collection whose data this column displays
“dataPath”: “field1”,
“label”: “No. Pendaftaran”, // The column header
“width”: 100, // Column width
“visible”: true, // Column visibility
“type”: “string”, // Data type for the column

  }, 
  { 
    "id": "col2", 
    "dataPath": "field2", 
    "label": "Nama Penuh", 
    "width": 100, 
    "visible": true, 
    "type": "string", 
   
 }, { 

“id”: “col3”,
“dataPath”: “field3”,
“label”: “Status”,
“width”: 100,
“visible”: true,
“type”: “string”,
}, {
“id”: “col4”,
“dataPath”: “field4”,
“label”: “Level”,
“width”: 100,
“visible”: true,
“type”: “image”,
}];
});

Please help me solve this. Thank you so much…

One thing I see is that you need to use the collection Field Key , and not the Field Name .

You can find the Field Key like this:

Not this:
.contains(‘No. Pendaftaran’, $w(’ #input1 ').value)

But this:
.contains(‘noPendaftaran’, $w(’ #input1 ').value)

I hope this helps,

Yisrael

Very much thanks Mr Yisrael.
I really appreciate your help.
Now I want to remove the ‘Up/Down’ bar as per below…can u show me how…thanks…

Hi Ysrael!

I’m coding multiple field searches to be displayed at once. I want my users to be able to find their search from a database. Users search for: “Location” (input field), “Age”(dropdown), " Language"(dropdown) and “Date and Time”(calendar) for classes (they need to fill out “location” and choose an option from each dropdown).
Have been reading wix tutorials and following forums closely which has helped a lot but I still have some errors when running the code. My table isn’t connected to the dataset so I’m defining columns using the API for tables .
formulariogrupo is my dataset.
Thank you in advance for your help!
This is what I have so far:

import wixData from ‘wix-data’;
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
$w.onReady(function () {
$w(" #table1 ").columns = [
{
“id”: “location”, // ID of the column for code purposes
// // The field key in the collection whose data this column displays
“dataPath”: “address”,
“label”: “Address”, // The column header
“width”: 100, // Column width
“visible”: true, // Column visibility
“type”: “string”, // Data type for the column
} ,
{
“id”: “age”,
“dataPath”: “ageRecommendations”,
“label”: “Age Suggested”,
“width”: 100,
“visible”: true,
“type”: “string”,
} ,
{
“id”: “language”,
“dataPath”: “language”,
“label”: “Language”,
“width”: 100,
“visible”: true,
“type”: “string”,
} ,
{
“id”: “dateandtime”,
“dataPath”: “timeDate”,
“label”: “Date & Time”,
“width”: 100,
“visible”: true,
“type”: “string”,
}];
});

//TODO: write your page related code here... 

export function search_click(event, $w) {
//Add your code for this event here:
// Runs a query on the “formulariogrupo” collection
wixData.query(‘formulariogrupo’)
.contains(‘location’, $w(’ #input1 ‘).value)
.find()
.then(res => {
$w(’ #table1 ‘).rows = res.items;
$w(’ #table1 ‘).show();
};
export function dropdown3_click(event, $w) {
//Add your code for this event here:
wixData.query(‘formulariogrupo’)
.contain (‘ageRecommendations’, $w(’ #dropdown3 ‘).value)
.find()
.then(res => {
$w(’ #table1 ‘).rows = res.items;
$w(’ #table1 ').show();
}

export function dropdown2_click(event, $w) {
//Add your code for this event here:
wixData.query(‘formulariogrupo’)
.contain (‘language’, $w(’ #dropdown2 ‘).value)
.find()
.then(res => {
$w(’ #table1 ‘).rows = res.items;
$w(’ #table1 ').show();
}

export function datePicker1_click(event, $w) {
//Add your code for this event here:
.contain (‘timeDate’, $w(’ #datePicker1 ‘).value)
.find()
.then(res => {
$w(’ #table1 ‘).rows = res.items;
$w(’ #table1 ').show();

Hi club40my

I am building a Wix Website and am looking for a way to make a search for my database, exactly similar to yours. A search box that a user can input a number and the result is displayed below in a table. I saw your website and that is exactly how I’d like it to have. When they see the input box , there are no search results visible yet, but when they finished entering an input, only then will the results appear. How do I do it like this?
I copied your code above, but it doesn’t seem to work.

Here is my site:
https://www.triumaccessexpressdelivery.com/track-you-package

I don’t understand the issue. I tried the site (in Preview) and it works fine. If it’s not working in Live, then perhaps you need to m ake sure that you have the correct collection permissions and that you have synced the sandbox collection to Live .