Search and filter data colecction with text input

Im trying to do a search on my database using an text input, a buttton and a table as shown in this tutorial.

https://support.wix.com/en/article/velo-tutorial-adding-collection-data-search-functionality

import wixData from “wix-data”

export function btnbuscar_click ( event ) {
search ()
}

export function search ( ) {
wixData . query ( “Servicios” )
. contains ( “title” , $w ( ‘#inputM’ ). value )

. find ()

. then ( results => {
$w ( ‘#table1’ ). rows = results . items ;
$w ( ‘#table1’ ). expand ();
});

$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” : “title” ,
“label” : “Matricula” , // The column header
“width” : 100 , // Column width
“type” : “string”
}];
});
}

My database collection is Servicios.
I haven’t connected the table to the dataset, should i? Cause when i do i get all the data unfiltered.

I have the same issue.

Please somebody help us

No, i would not recommend to connect a dataset and mix it with a version of Wix-Data-API.

Go either the DATASET-WAY, or do it with Wix-DATA-API. Do not start to mix them.

import wixData from "wix-data"

let searchWord

$w.onReady(()=>{
	$w('#inputM').onChange(()=>{
		searchWord=$w('#inputM').value;
	});

	$w('#btnbuscar').onClick(()=>{
		let items = await startSerachEngine(searchWord);		
		if items.length > 0 {
			console.log("Congratulation you found some data!");
			console.log(items);
			console.log(items[0]);
			console.log(items[0].title);	
			console.log(items[0]._id);	
		}
		else {console.log("Nothing found!");}					
	});
});

function startSearchEngine(searchWord) {
	return wixData.query("Servicios")
	.contains("title", searchWord)
	.find().then(res=>{
		let items = res.items
		if items.lenght >0 {console.log("Some data has been found");}
		else {console.log("No data has been found!")}
		return items
	})
	.catch((err)=>{console.log("We have a problem! ---> " + err);});
}

Take a look onto example-code.
Modify it by your own needs.
Have fun.

Hello!

I’ve tried your code, added some () and corrected a typo.

import wixData from “wix-data”

let searchWord

$w . onReady (()=>{
$w ( ‘#inputM’ ). onChange (()=>{
searchWord = $w ( ‘#inputM’ ). value ;
});

$w ( ‘#btnbuscar’ ). onClick (()=>{
let items = startSearchEngine ( searchWord );
if ( items . length > 0 ){

//THIS .LENGTH IS NOT WORKING BECAUSE OF LET ITEM = FUNCTION

  console . log ( "Congratulation you found some data!" ); 
  console . log ( items ); 
  console . log ( items [ 0 ]); 
  console . log ( items [ 0 ]. title );   
  console . log ( items [ 0 ]. _id );   
} 
**else**  { console . log ( "Nothing found!" );}          

});
});

function startSearchEngine ( searchWord ) {
return wixData . query ( “Servicios” )
. contains ( “title” , searchWord )
. find (). then ( res =>{
let items = res . items
if ( items . length > 0 ) { console . log ( “Some data has been found” );}
else { console . log ( “No data has been found!” )}
return items
})
. catch (( err )=>{ console . log ( "We have a problem! —> " + err );});
}

Yes, i did never test it or debuged any typos, thats right.
I had not the time to do that.

I assume, that the code did not work ?

Maybe because i forgot a → ASYNC-AWAIT ?

The - → AWAIT ← - - was already there, but the second part of it - - > ASYNC ← -
i forgot to implement into the code.

//THIS .LENGTH IS NOT WORKING BECAUSE OF LET ITEM = FUNCTION

$w('#btnbuscar').onClick(async()=>{
    let items = await startSearchEngine(searchWord);

Before you can use the results, the results have first to be ready.
Even a MACHINE needs some time to generate RESULTS.

So back to the ERROR. When you try to ask for results, before they are ready to be used - → of course you get no length, because there is nothing to get yet. :grin:

What exact error do you get?
What does not work?
Do you get results already?

Next time please try to give a more detailed answer.

Oh ok, i see. Thanks for the answer.
Now i dont get an error, but i dont get the results either.
I get “No data has been found! , Nothing found!” but im searching for a ‘title’ i know its in the collection(its a string).

Also, even if i dont directly connect the table to the dataset, i should have the dataset on the page?

Do everything STEP-BY-STEP.
First get your RESULTS.
To have control over RESULTS → you have the → CONSOLE <—
When you have your results, you will have to connect them with your TABLE or better → REPEATER.

A REPEATER is the new and upgraded TABLE.

You already did it in your previous code…

$w('#table1').rows=results.items;
$w("#table1").columns=[{         "id": "col1",// ID of the column for code purposes// The field key in the collection whose data this column displays           "dataPath": "title",          "label": "Matricula",// The column header         "width":100,// Column width         "type": "string"        }];
});

Ok, i get it now, but i still dont get the results. i dont know what am i missing

import wixData from “wix-data”

let searchWord

$w . onReady (()=>{
$w ( ‘#inputM’ ). onChange (()=>{
searchWord = $w ( ‘#inputM’ ). value ;
});

$w ( '#btnbuscar' ). onClick ( **async** ()=>{ 
    **let**  items  =  **await**  startSearchEngine ( searchWord );         
    **if**  ( items . length  >  0 ){ 
        console . log ( "Congratulation you found some data!" ); 
        console . log ( items ); 
        console . log ( items [ 0 ]); 
        console . log ( items [ 0 ]. title );     
        console . log ( items [ 0 ]. _id );   
    } 
    **else**  { console . log ( "Nothing found!" );}                    
}); 

});

function startSearchEngine ( searchWord ) {
return wixData . query ( “Servicios” )
. contains ( “title” , searchWord )
. find (). then ( res =>{
let items = res . items
if ( items . length > 0 ) { console . log ( “Some data has been found” );}
else { console . log ( “No data has been found!” )}
return items
})
. catch (( err )=>{ console . log ( "We have a problem! —> " + err );});
}

  • check your ELEMENT-IDs
  • check your → searchWord
  • check till which code-line do you get CONSOLE-LOGS?
  • where does your logs end?
  • are all logs in right order?
  • how do look like your database?
  • check all these questions and you will get your result.

Here some UPGRADED-VERSION…

import wixData from "wix-data"

let searchWord

$w.onReady(()=>{
    $w('#input1').onChange(()=>{
        searchWord=$w('#input1').value;
    });

    $w('#btnbuscar').onClick(async()=>{
        let items = await startSearchEngine(searchWord);   
        console.log("ITEMS: ", items);     
        if (items[0]){          
            console.log("Yeahaaa! You found some data!");
            console.log("Items: ", items);
            console.log("ITEM-1: ", items[0]);
            console.log("Title: ", items[0].title);    
            console.log("ID: ", items[0]._id);  
        }
        else {console.log("Nothing found!");}                   
    });
});

function startSearchEngine(searchWord) {
    return wixData.query("Servicios")
    .contains("title", searchWord)
    .find().then(res=>{console.log("RES: ", res._totalCount);
        let items = res.items
        if (res._totalCount > 0) {return items}
        else {items=[]; return items}
    })
    .catch((err)=>{console.log("We have a problem! ---> " + err);});
}

I asume, there were done some changes inside of the RESULT-OBJECT.
On my opinion, in the past, you could find —> length <— parameter.
Now it is changed to —> _totalCount (NEW).

I could successfully test this CODE on my own example-Database.