Search Database with Submit Button, results to table

Ask the community
,
1

I am going crazy, and been researching this for weeks, and followed every step in the tutorial " Velo Tutorial: Adding Collection Data Search Functionality " bc its exactly what i need. user enters a 6 digit number, hit submit, 1 record appears in the table with 6 columns of information or even on a separate results page would be fine… No dice. Tried running debug, it doesn’t change or tell me anything. below is the code with the table and I have 2 coa numbers (30000 and 30001) that I have filled in with info for testing and they are in the table if u page down on the table which I don’t know how to get rid of either… probably a clear button or if the user searches another number…

import wixData from ‘wix-data’ ;

export function searchButton_click ( event ) {

wixData . query ( “coa” )
// Query the collection for any items whose “coa” field contains
// the value the user entered in the input element
. contains ( “coa” , $w ( “#searchBox” ). value )
. find () // Run the query
. then ( res => {
// Set the table data to be the results of the query
$w ( “#resultsTable” ). rows = res.items ;
//$w(“#resultsTable”).expand(); //would like this table to appear when the results populate but cant get results atm
});
}

$w . onReady ( function () {
$w ( “#resultsTable” ). columns = [
{
“id” : “col1” , // ID of the column for code purposes
“dataPath” : “coa” , // The field key in the collection whose data this column displays
“label” : “COA” , // The column header
“width” : 100 , // Column width
“type” : “string” , // Data type for the column
},
{
“id” : “col2” ,
“dataPath” : “actorName” ,
“label” : “Actor Name” ,
“width” : 150 , // Column width
“type” : “string” ,
},
{
“id” : “col3” ,
“dataPath” : “date” ,
“label” : “date” ,
“width” : 100 , // Column width
“type” : “string” ,
},
{
“id” : “col4” ,
“dataPath” : “city” ,
“label” : “City” ,
“width” : 150 , // Column width
“type” : “string” ,
},
{
“id” : “col5” ,
“dataPath” : “event” ,
“label” : “Event” ,
“width” : 220 , // Column width
“type” : “string” ,
},
{
“id” : “col6” ,
“dataPath” : “itemDescription” ,
“label” : “Item Description” ,
“width” : 220 , // Column width
“type” : “string” ,
}]; //,
});

any help would be awesome i have been going in circles and find the same 4 things on making this and most have to do w drop downs which i dont need.

2

in case anyone finds this post and is still needing answers, i got in touch w a youtube guy and he helped me…
nixing the submit button and table (trading for a timer on user input key strokes and a repeater that collapses for aesthetics), this is the code that made it all work:

import wixData from ‘wix-data’ ;

$w . onReady ( function () {
// The script will run when the page is ready
});

let debounceTimer ;

export function searchBar_keyPress ( event ) {
if (! $w ( ‘#searchBar’ ). value ) {
// If the search bar is empty, collapse the repeater
$w ( “#resultsTable” ). collapse ();
// Hide the loading gif
$w ( “#loadingGif” ). hide ();
// Hide the text results
$w ( ‘#textResults’ ). hide ();
return ;
}

// Show the loading gif
$w ( “#loadingGif” ). show ();

if ( debounceTimer ) {
clearTimeout ( debounceTimer );
debounceTimer = undefined ;
}

debounceTimer = setTimeout (() => {
// Wait for 500 milliseconds before filtering the data
$w ( “#dataset1” ). setFilter ( wixData . filter (). contains ( “title” , $w ( ‘#searchBar’ ). value ))
. then (() => {
updateResults ();
})
}, 500 );
}

function updateResults () {
let total = $w ( ‘#dataset1’ ). getTotalCount ();

// Hide the loading gif
$w ( “#loadingGif” ). hide ();

if ( total === 1 ) {
// Update the text to show that one result was found
//$w(‘#textResults’).text = Found it!;
//$w(‘#textResults’).show();
// Expand the repeater to display the result
$w ( “#resultsTable” ). expand ();
} else if ( total === 0 ) {
// Update the text to show that no results were found
$w ( ‘#textResults’ ). text = “No results found!” ;
$w ( ‘#textResults’ ). show ();
// Collapse the repeater
$w ( “#resultsTable” ). collapse ();
} else {
// Update the text to show the number of results found
//$w(‘#textResults’).text = Found ${total} results!;
//$w(‘#textResults’).show();
// Expand the repeater to display the results
$w ( “#resultsTable” ). collapse ();
}
}