Text Boxes Flickering/Shuffling

Ask the community
,
1

Hello,

My search filters by drop downs and a search button to initiate the search, two of the drop downs are multipliers to the results. During the search maybe less than 2 seconds. The texts boxes in which the results are shown will flicker/shuffle through the results, and finally show the correct result. Is there a way for me skip that shuffle and flicker so after the button is initiated it only shows the correct result. Not really sure what needs to be added to my code. Any help would be greatly appreciated.

import wixData from ‘wix-data’ ;
$w.onReady( function () {
});
export function button1_click(event, $w) {
let generalFilter = wixData.filter()
.eq( “Size” , $w( ‘#dropdown1’ ).value)
.contains( “Height” , $w( ‘#dropdown2’ ).value)
.contains( “Weight” , $w( ‘#dropdown3’ ).value);
let RedFilter = generalFilter.eq( “Color” , “Red” );
let BlueFilter = generalFilter.eq( “Color” , “Blue” );
Promise.all(
[$w( ‘#dataset1’ ).setFilter(RedFilter),
$w( ‘#dataset2’ ).setFilter(BlueFilter)]
)
.then(() =>{
$w( ‘#text1’ ).expand();
$w( ‘#text2’ ).expand();

let dropdown4 = Number($w( “#dropdown4” ).value);
let dropdown5 = Number($w( “#dropdown5” ).value);
let text1 = Number ($w( “#text1” ).text);
let text2 = Number ($w( “#text2” ).text);
$w( “#text1” ).text = (dropdown4dropdown5text1).toFixed( 2 ).toString();
$w( “#text2” ).text = (dropdown4dropdown5text2).toFixed( 2 ).toString();
})
}

Thank you,

2

Hello Td,

I am new to code as well. I have seen the example that you have sent. Which is different from my code, an on key event is causing the filter in that example and mine uses drop downs and then a button. A repeater is used in the example and text fields are used in mine. I’m not really sure on how to incorporate the code used in the example into my code.

3

If you look at the Corvid example given.
https://www.wix.com/corvid/example/search-a-database

You will see that it makes use of debounce which limits the rate at which a function can fire and this is mentioned in the example info text too.

We delay the filter function for two reasons:

  • It takes time until a keypress value is added to the search value. If we don’t delay, the search value will not include the last keypress.

  • When we type fast we see the list of destinations flicker. This is because the repeater loads again for every key visitors press. The delay lets us wait until the visitor is finished typing.

Yisrael had previously made up an excellent forum post about using it, which you can read here.
https://www.wix.com/corvid/forum/tips-tutorials-examples/give-the-textinput-onkeypress-function-some-time

You can either look at adding debounce and setTimeout to your own used code, or you can go by the example already linked and change it to suit your own site.