Dynamic Page Search Problem

Ask the community
,
1

I am having issues with a search that I have put on my dynamic (all) page. The problem is, you have to go back to the home page, and click back into the search area for it to work. How can I fix this problem and have it work immediately? The source code I wrote for this is below. Thanks!

import wixData from ‘wix-data’ ;

$w ( “#propertiesRepeater” ). hide ();

export function button5_click ( event ) {
$w ( ‘#propertiesDataset’ ). setFilter ( wixData . filter ());
$w ( ‘#searchBar’ ). value = undefined ;
$w ( ‘#button4’ ). show ();
$w ( ‘#button4’ ). enable ();
}

**let**  debounceTimer ;

export function searchBar_keyPress ( event ) {

**if**  ( debounceTimer ){ 

    clearTimeout  ( debounceTimer ); 

    debounceTimer  =  **undefined** ; 

} 

debounceTimer  =  setTimeout (()=> {( $w ( '#searchBar' ). value );}, 200 );

wixData . query ( ‘Properties’ ). contains ( ‘city’ , $w ( ‘#searchBar’ ). value )
. or ( wixData . query ( “Properties” ). contains ( “cityOr” , $w ( ‘#searchBar’ ). value ))

. find ()

. then ( results => {

 $w ( '#propertiesRepeater' ). data  =  results . items ;

});

}

$w ( ‘#button5’ ). hide ();

export function button4_click ( event ) {
search ();
$w ( ‘#button4’ ). enable ();
$w ( “#propertiesRepeater” ). show ();

}
export function button4_dblClick ( event ) {
search ();
$w ( ‘#button4’ ). enable ();
$w ( “#propertiesRepeater” ). show ();
}

function search ( ) {

wixData . query ( "Properties" ) 
    . contains ( "city" ,  $w ( '#searchBar' ). value ) 
     . or ( wixData . query ( "Properties" ). contains ( "cityOr" ,  $w ( '#searchBar' ). value )) 

    . find () 
    . then ( results  => { 
        $w ( '#propertiesRepeater' ). data  =  results . items ; 
        
    }); 



$w ( '#button5' ). show (); 
$w ( '#button5' ). enable ();

}

2

Also, this code is published live. It works properly in preview, but not published mode.

3

First of all you should clean up your code a little bit…

import wixData from 'wix-data';

let debounceTimer;

$w.onReady(function() {
    $w('#dataset1').onReady(()=>{
        $w("#propertiesRepeater").hide();
        $w('#button5').hide();

        $w('#button4').ondblClick(async()=>{
            $w('#button4').enable();    $w("#propertiesRepeater").show();
            $w('#button5').enable();    $w('#button5').show();  
            let foundData = await getData('Properties', 'city', $w('#searchBar').value); console.log("FOUND-DATA: ", foundData);
            $w('#propertiesRepeater').data = foundData.items;
        }); 

        $w('#button5').onClick(()=>{
            $w('#propertiesDataset').setFilter(wixData.filter());
            $w('#searchBar').value = undefined;
            $w('#button4').show();
            $w('#button4').enable();
        });

        $w('#searchBar').onKeypress(async()=>{debounceTimer = setTimeout(()=> {($w('#searchBar').value);},200);
            if (debounceTimer){
                clearTimeout (debounceTimer);
                debounceTimer = undefined;
                let foundData = await getData('Properties', 'city', $w('#searchBar').value); console.log("FOUND-DATA: ", foundData);
                $w('#propertiesRepeater').data = foundData.items;
            }
        });
    });
});


function getData(database, dbField, searchValue) {
    return wixData.query(database).contains(dbField, searchValue)
    .or(wixData.query(database).contains("cityOr", searchValue))
    .find().then((res)=> {return (res);});
}
  1. not using EXPORT FUNCTIONS ANYMORE to connect BUTTON with CODE.
  2. Do not mix DATASET + WixData = in most cases, you will get trouble.
  3. Do not forget to use onReady, when you work with DATASETS.
  4. Better you generate RETURNING-FUNCTIONS, to keep your code compact and clean.

I did not really understand your issue, so i just cleaned up your code a little bit.

4

Thank you so much! That actually fixed my issues. Can you tell me what I need to add to add a “No results” text for when there is no result?

5

The following function gives you results…

functiongetData(database,dbField,searchValue){returnwixData.query(database).contains(dbField,searchValue).or(wixData.query(database).contains("cityOr",searchValue)).find().then((res)=>{return(res);});}

…after you have called it with the following code…

let  foundData = awaitgetData('Properties','city',
$w('#searchBar').value);
console.log("FOUND-DATA: ",foundData);

So your concern is now to find out how many items are inside the recieved package???

  1. Possibility-1 → a lot of ITEMS found! → data-length of items > 1 !!!
  2. Possibility-2 → no ITEMS found → data-length = 0 !!!
if(foundData.items.length>0) {console.log("Some DATA has been found!!!");}
else {console.log("No DATA has been found!");}
6

No, I am wanting to show the result from the repeater if the items are found. Like they are doing now. Other wise I just want it to say “Sorry, no results found.”

7

ONE MORE TIME…

if(foundData.items.length>0){
    console.log("Some DATA has been found!!!");
}
else{console.log("No DATA has been found!");}

Add this code-part to your already running code and take a look into CONSOLE.

To fill REPEATER with found data, you already have the code …

$w('#propertiesRepeater').data=foundData.items;

Now combine the IF-ELSE- query and the code which feeds the repeater with data.

This example is showing you exactly what you want.
The code can recognize, if DATA was found or not!

If found —> do something!
If not found → do something else!